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.
Download
version 2.0 (latest)

Other examples

Installation

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() {
        $("textarea").highlightTextarea({
              words: ["first word","an other word"]
        });
    });
</script>
Done !
Important : I recommend to use fixed width and height for textarea instead of number of rows and cols.

Configuration

highlightTextarea takes some additional parameters. The following are available :
words
An array with words and sentences which must be highlighted. You can use regular expressions. Default :
words: []
color
The color used for highlight words. Default :
color: '#ffff00'
caseSensitive
If set to false upper and lower case words will be identically highlighted. Default :
caseSensitive: true
id
You can add an id to the main highlight container, see section "Structure" bellow. Default :
id: null
resizable
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>

API

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

Structure

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

Bugs report and features request

On my github repo.

Changelog

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

License

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.