Highlight Text In Contenteditable Elements With simpleHighlightTextarea jQuery Plugin

simpleHighlightTextarea is a lightweight jQuery plugin that lets you highlight text inside a contenteditable element using custom colors. This can be useful for interactive tutorials, annotations, or any content where you want to draw the user's attention to specific parts of the text. 

It works by analyzing the text within the contenteditable element and identifying instances of the defined trigger characters. It then wraps the text between those characters with a span element and applies the corresponding color as an inline style.

See also:

• 10 Best Text Highlighting Plugins In JavaScript

How to use it:

1. Download the plugin and include the following files on your webpage.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery simpleHighlightTextarea plugin -->
<link rel="stylesheet" href="/path/to/simpleHighlightTextarea.css" />
<script src="/path/to/simpleHighlightTextarea.js"></script>

2. Create a div with the class highlight_textarea and the contenteditable attribute set to true. This will be your editable area.

<div contenteditable="true" class="highlight_textarea" placeholder="Type something here..."></div>

3. Add the highlightChars attribute to the contenteditable element. This attribute takes a JSON string where you define the trigger characters/symbols and their corresponding highlight colors.

<div contenteditable="true" class="highlight_textarea" placeholder="Type something here..." highlightChars='{"?":"red","*":"blue"}'></div>

4. initialize the plugin using jQuery and call the textareaColorizeFunc function on input to automatically highlight matched text. In this example, any text between question marks (?) will be colored red, and text between asterisks (*) will be colored blue.

$(".highlight_textarea").on('input', function() {
  let highlightChars = $.parseJSON($(this).attr("highlightChars"));
  textareaColorizeFunc(this,highlightChars);
});

---

This awesome jQuery plugin is developed by abcd1234564499sc. For more Advanced Usages, please check the demo page or visit the official website.