Highlight Text Within Textarea – texthighlighter.js

Category: Javascript , Text | October 5, 2023
Author:wstaeblein
Views Total:814 views
Official Page:Go to website
Last Update:October 5, 2023
License:MIT

Preview:

Highlight Text Within Textarea – texthighlighter.js

Description:

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

You Might Be Interested In:


Leave a Reply