Highlight Text Within Textarea – texthighlighter.js

A responsive text highlighter plugin that makes it possible to highlight specific text within a textarea element. Inspired by Tiny jQuery Plugin To Highlight Text In Textarea.

How to use it:

1. Load the texthighlighter.js plugin’s files in the document.

<link href="texthighlighter.css" rel="stylesheet">
<script src="texthighlighter.js"></script>

2. Initialize the textHighlight on your textarea.

<textarea id="example" spellcheck="false">
  ...
</textarea>

let textContent = document.getElementById('example');
let instance = new textHighlight(textContent);

3. Highlight specific text within the textarea.

let textHighlight = 'text to highlight';
instance.search(textHighlight);

4. Determine if the results are case-sensitive or not.

let textHighlight = 'text to highlight';
let caseSensitive = true;    
instance.search(textHighlight, caseSensitive);

5. Clear all highlights.

instance.clear();

6. Destroy the plugin.

instance.destroy();

Changelog:

10/05/2023

• Destroy observer

10/02/2023

• CSS adjustments, image & text changes

10/01/2023

• Word search, Navigate results & results count

09/30/2023

• Escape content of shadow box

03/02/2023

• CSS adjustment