Tiny jQuery Plugin To Highlight Text In Textarea

File Size: 9.03 KB
Views Total: 5580
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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:


  • One missing semicolon


  • Fixed for IE11.


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


  • Fix to escape HTML input

v1.0.2 (2015-09-28)

  • Extra offset to hide scrollbar in Firefox.


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


  • fixed for IE.


  • Simpler instantiation, updated sample code.


  • 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.