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

schema

• Type: IDictionary<(jodit: IJodit, matches: RegExpMatchArray) => HTMLElement>
• Default: {}

A dictionary where keys are regular expressions and values are functions that return HTML elements to wrap matched text.

const editor = Jodit.make('#editor', {
    highlightSignature: {
        schema: {
            '[^\\s]+@[a-z.-]+': (jodit) => jodit.createInside.element('strong')
        }
    }
});
Copy

processDelay

• Type: number
• Default: 0

The delay in milliseconds between processing chunks of text. This can be useful to prevent UI freezing when processing large documents.

const editor = Jodit.make('#editor', {
    highlightSignature: {
        processDelay: 10, // 10ms delay between processing chunks
        schema: {
            // your schema here
        }
    }
});
Copy

processInChunkCount

• Type: number
• Default: 300

The number of text nodes to process in a single chunk. This helps to optimize performance by breaking the processing into smaller chunks.

const editor = Jodit.make('#editor', {
    highlightSignature: {
        processInChunkCount: 500, // Process 500 nodes at once
        schema: {
            // your schema here
        }
    }
});
Copy

excludeTags

• Type: HTMLTagNames[]
• Default: ['pre']

An array of HTML tag names that should be excluded from processing. By default, the plugin doesn't process text inside <pre> tags.

const editor = Jodit.make('#editor', {
    highlightSignature: {
        excludeTags: ['pre', 'code', 'script'], // Don't process text in these tags
        schema: {
            // your schema here
        }
    }
});
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

Example 3: Performance Optimization

For large documents with many text nodes, you can optimize performance by adjusting the processing delay and chunk size:

const editor = Jodit.make('#editor', {
    highlightSignature: {
        processDelay: 5, // 5ms delay between chunks
        processInChunkCount: 200, // Process 200 nodes at a time
        schema: {
            '\\b\\d{3}-\\d{3}-\\d{4}\\b': (jodit) => {
                // Highlight phone numbers
                const span = jodit.createInside.element('span', {
                    style: {
                        backgroundColor: '#e6f7ff',
                        borderBottom: '1px dashed #1890ff'
                    }
                });
                return span;
            }
        }
    }
});
Copy

Example 4: Excluding Specific Tags

You can exclude specific tags from processing:

const editor = Jodit.make('#editor', {
    highlightSignature: {
        excludeTags: ['pre', 'code', 'script', 'style'],
        schema: {
            '\\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}\\b': (jodit) => {
                // Highlight email addresses
                const span = jodit.createInside.element('span', {
                    style: {
                        color: 'blue',
                        textDecoration: 'underline'
                    }
                });
                return span;
            }
        }
    }
});
Copy

How It Works

1. The plugin scans the editor's content for text nodes
2. For each text node, it checks if the content matches any of the regular expressions defined in the schema
3. If a match is found, the plugin wraps the matched text with a temporary HTML element created by the corresponding function
4. These temporary elements are only visible in the editor and are removed when getting the final HTML value
5. The plugin also handles cursor position preservation when replacing text with highlighted elements

This approach allows you to visually highlight specific patterns in the editor without affecting the final HTML output.