jQuery • highlightTextarea

highlightTextarea is a jQuery plugin which allows you to highlight words and sentences into textareas. Words are defined in a jQuery array and you can customize highlight color and case sensitivity. The highlighting updates itself when typing in the textarea and follows scroll and resizing (with jQuery-UI).

Quick demo

Words Lorem ipsum and vulputate are highlighted.
version 2.0 (latest)

Other examples


Include jQuery and highlightTextarea codes between <head> tags on your page.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.highlighttextarea.css" />	
<script type="text/javascript" src="jquery.highlighttextarea.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
              words: ["first word","an other word"]
Done !
Important : I recommend to use fixed width and height for textarea instead of number of rows and cols.


highlightTextarea takes some additional parameters. The following are available :
An array with words and sentences which must be highlighted. You can use regular expressions. Default :
words: []
The color used for highlight words. Default :
color: '#ffff00'
If set to false upper and lower case words will be identically highlighted. Default :
caseSensitive: true
You can add an id to the main highlight container, see section "Structure" bellow. Default :
id: null
If set to true the textarea will be resizable. Default :
resizable: false
Warning : you must include jQuery-UI with resizable option to your page in order to be able to resize textareas :
<link type="text/css" rel="stylesheet" 
    href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />	
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>


Some methods can be called after instanciate the plugin :
Remove the highlight and disable handlers.
Enable handlers and refresh the highlight.
Force refresh the highlight. Returns false if handlers are disabled, true otherwise.
Update highlight options (you cannot change 'resizable' value). Returns false if handlers are disabled, true otherwise.
$("textarea").highlightTextarea('setOptions', { ...... });
Update words list. Returns false if handlers are disabled, true otherwise.
$("textarea").highlightTextarea('setWords', [ ...... ]);


Here is the layout created by highlightTextarea arround each triggered textarea.

Bugs report and features request

On my github repo.


2.0 - 24/10/2012
  • Add API methods
  • Improve stability
  • Escape HTML chars
1.0 - 17/02/2012
  • First version


highlightTextarea is released under a dual license. You can choose either the GPL or MIT license depending on the project you are using it in and how you wish to use it.

Part of the code was written by Julien L on Stack Overflow : http://stackoverflow.com/a/7599199.
Thanks to Pascal Wacker for the jQuery wrapper and API methods.