• Jodit
  • PRO
  • Builder
  • Getting Started
  • Playground
  • Examples
  • Documentation
  • Download
  • Overview
  • Issue tracker
  • Docs
  • Plugins
  • Demo
  • Pricing
  • File Browser Pro
  • Sign in
Get connected wth us on social networks!

Footer

Jodit Core

  • Jodit Home page
  • Documentation
  • Playground
  • Examples
  • Github
  • Issues

Integration

  • Jodit React
  • Jodit Angular
  • Jodit Vue
  • Jodit Yii2
  • Jodit Joomla

PRO/OEM plugins

  • AutoComplete
  • Backup Plugin
  • Button Generator
  • Change case
  • Custom Color Picker
  • Emoji
  • Finder
  • Google Search
  • Paste code
  • Show Blocks
  • Virtual Keyboard
  • Tune block
  • Highlight signature
  • Google Maps Editor
  • Export in PDF
  • Page Break
  • Iframe Editor
  • Paste from Word PRO
  • Mobile View
  • ToDo List
  • Translate

Links

  • Demo PRO/OEM
  • Demo FileBrowser PRO
  • Price
  • License
  • Support
  • For resellers

Versions

  • site v.0.1.810
  • Jodit PRO v.4.6.4
  • Jodit v.4.6.2
  • All versions
2025 © Copyright: XDSoft.net <support@xdsoft.net>
  • Getting started

    • Installation
    • Usage
    • Support
    • FAQs
    • Cloud
    • Examples
  • How to

    • Create plugin
    • Add custom button
    • Add custom font in the font list
    • How to create module
    • How to generate license key
    • How to make a backend finder
    • How to set up document view
  • Modes

    • Source mode
  • Customisation

    • Theme
    • Keyboard
  • API

    • License Rest API
    • JS API
  • Changelog

  • Plugins

    • AutoComplete
    • Backup Plugin
    • Button Generator
    • Change case
    • Custom Color Picker
    • Emoji
    • Finder
    • Google Search
    • Paste code
    • Show Blocks
    • Virtual Keyboard
    • Tune block
    • Highlight signature
    • Google Maps Editor
    • Export in PDF
    • Page Break
    • Iframe Editor
    • Paste from Word PRO
    • Mobile View
    • ToDo List
    • Translate

Plugin for highlighting sections of text

Designed to highlight a part of the text with a certain template. The plugin settings are very simple, you define a regular expression, finding which, the plugin will replace it with the function result.

Options

interface highlightSignature: { schema: IDictionary< (jodit: IJodit, matches: RegExpMatchArray) => HTMLElement >; };
Copy

But this temporary element will not get into the final HTMl.

Example 1

For example, we need to highlight email addresses everywhere:

const editor = Jodit.make('#editor', { highlightSignature: { schema: { '[^\\s]+@[a-z.-]+': (jodit) => jodit.createInside.element('strong') } } }); editor.value = '<p>Hi Valery chupurnov@gmail.om</p>'; console.log(editor.value); // '<p>Hi Valery chupurnov@gmail.om</p>' console.log(editor.getNativeEditorValue()); // '<p>Hi Valery <strong data-jodit="temp">chupurnov@gmail.om</strong></p>'
Copy

The final value does not change. And in the original textarea the value not wrapped in the strong tag will be saved.

Example 2

Now let's highlight something else. Let us have macros ${formSubmittedDate}, ${formSessionURL} which need to be highlighted with different background color.

const editor = Jodit.make('#editor', { highlightSignature: { schema: { '\\$\\{([^}]+)\\}': (jodit, matched) => { let color = 'yellow'; // all another macros will be `yellow` switch (matched[1]) { case 'formSubmittedDate': color = 'red'; break; case 'formSessionURL': color = '#0f0'; break; } const span = jodit.createInside.element('span', { style: { backgroundColor: color } }); return span; } } } }); editor.value = '<p>The text ${formSubmittedDate} and ${formSessionURL} has some styling/decoration around it.</p>'; console.log(editor.value); // '<p>The text ${formSubmittedDate} and ${formSessionURL} has some styling/decoration around it.</p>' console.log(editor.element.value); // '<p>The text ${formSubmittedDate} and ${formSessionURL} has some styling/decoration around it.</p>' console.log(editor.getNativeEditorValue()); // '<p>The text <span data-jodit="temp" style="background-color:red">${formSubmittedDate}</span> and <span data-jodit="temp" style="background-color:#0f0">${formSessionURL}</span> has some styling/decoration around it.</p>' console.log(editor.editor.innerHTML === editor.getNativeEditorValue()); // true
Copy

Screenshots

Demo

Enter element@gmail.com or ${formSubmittedDate}, ${formSessionURL}