Overview

highlightTextarea aim is to highlight portions of text into a textarea or a input. It can highlight a set of words or a specific range.

Example

In this example, the words Lorem ipsum and vulputate are highlighted in yellow. The content is still editable and the highlighting will update automatically.

More examples are available here.

<textarea cols="50" rows="5">...</textarea>

<script>
  $('textarea').highlightTextarea({
    words: ['Lorem ipsum', 'vulputate']
  });
</script>

Installation

Dependencies

  • jQuery >= 1.5
  • jQueryUI Resizable >= 1.9 (only if you want to use resizable textareas)

Includes

The module is available on Bower. Add jquery-highlighttextarea to your bower.json file install or install it manually with bower install jquery-highlighttextarea.

Include the Javascript files...

<script src="dist/jquery/jquery.min.js"></script>
<script src="dist/jquery-ui/jquery-ui.min.js"></script>
<script src="dist/jquery-highlighttextarea/jquery.highlighttextarea.js"></script>

...and include the stylesheet as well as jQueryUI one.

<link rel="stylesheet" href="dist/jquery-ui/theme/jquery-ui.min.css">
<link rel="stylesheet" href="dist/jquery-highlighttextarea/jquery.highlighttextarea.min.css">

Usage

Simply call highlightTextarea plugin on a jQuery object.

$(/* selector */).highlightTextarea({
  /* options */
});

Element size

highlightTextarea won't work on dynamic textareas. You must use a fixed size, either with cols and rows attributes (size fir inputs) or in CSS by defining height and width in px or em (no percentage).

Options

Name type default description
words array [] Either an array of words to highlight (can be regular expressions) or an array of objects containing:
  • color: color of this subset of words
  • words: array of words to highlight (can be regexes too)
ranges array [] Either an array of indexes pairs (start, end) or an array of objects containing:
  • color: color of this subset of ranges
  • ranges: array of indexes pairs
  • start
  • end or length
Provide ranges or start/end/length, but not both.
color string '#FFFF00' Color used if words is an array of words or if ranges is an array of pairs.
caseSensitive boolean true Set to false to make case insensitive words match
resizable boolean false Should the textarea be resizable (requires jQueryUI Resizable)
id string '' Identifier to add to the textarea container, don't use this parameter when initializing multiple textareas at once

Only provide words or ranges but not both (if so, ranges will be ignored).