Tiny jQuery Plugin To Highlight Text In Textarea

Highlight Within Textarea is a simple, lightweight jQuery plugin which allows you to highlight text inside of <textarea> element using Regex or Array.

See also:

• jQuery Based Text Highlighter For Textarea
• jQuery Plugin To Highlight Text In Text Fields - highlightTextarea
• Highlight Text Within Textarea – texthighlighter.js

Basic usage:

1. Add the necessary JavaScript and CSS files into your web project.

<script src="/path/to/jquery.min.js"></script>

<!-- highlight-within-textarea CSS/JS -->
<link href="jquery.highlight-within-textarea.css" rel="stylesheet">
<script src="jquery.highlight-within-textarea.js"></script>

2. Create a Regex rule to highlight text typed in the <textarea>. In this case, the plugin will highlight all numbers found in your <textarea>.

function onInputRegex() {
  return /\d+/g;
}

3. Call the function on the target <textarea> element and done.

$('textarea').highlightWithinTextarea({ onInput: onInputRegex });

Change logs:

2017-09-23

• One missing semicolon

2017-05-30

• Fixed for IE11.

2017-04-29

• Fix mark style be play nice with Bootstrap
• Fix to escape HTML input

2016-07-07

• Fix to escape HTML input

v1.0.2 (2015-09-28)

• Extra offset to hide scrollbar in Firefox.

2015-09-27

• Language tweaks, scroll fix
• Fixed some wacky edge case scrolling bugs.

2015-09-24

• fixed for IE.

2015-09-18

• Simpler instantiation, updated sample code.

2015-09-14

• JS update
• more demos

---

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