jQuery Plugin To Highlight Text In Text Fields - highlightTextarea

File Size: 16.5 KB
Views Total: 6092
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Highlight Text In Text Fields - highlightTextarea

highlighttextarea is a jQuery plugin used to highlight text (words, sentences, strings, etc...) defined in a JS array object for your text fields like textarea and input.

How to use it:

1. Make sure to load the jQuery highlighttextarea plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.highlighttextarea.js"></script>

2. Call the plugin and create an array of words you want to highlight.

words: {
color: '#ADF0FF',
words: ['word1','word2']

3. Available options to customize the plugin.

// Either an array of words to highlight (can be regular expressions) or an array of objects
words: { 

  // color of this subset of words
  color: '#ADF0FF', 

  // array of words to highlight
  words: ['Word1','Word2'] 

// Either an array of indexes pairs (start, end) or an array of objects
ranges: [{ 

  // color of this subset of ranges
  color: '#ADF0FF', 
  start: 0,
  length: 5
}, {
  color: '#FFFF00',

  // array of indexes pairs
  ranges: [[6, 11], [40, 55]] 

// Color used if words is an array of words or if ranges is an array of pairs.
color: '#ffff00', 

// Set to false to make case insensitive words match
caseSensitive: true, 

// Should the textarea be resizable (requires jQueryUI Resizable)
resizable: false, 

// Identifier to add to the textarea container, 
// don't use this parameter when initializing multiple textareas at once
id: '', 

wordsOnly: false,

debug: false

Change logs:


  • Replace all words at one time by joining all words as one regexp.


  • v3.2.0: Fixing bug where HTML is incorrectly escaped


  • v3.1.2


  • adding a class attribute to <mark> tags to facilitate styling (only for ranges)



  • update to v3.1.0


  • incorrect highlight with ranges


  • Fixes css conflicts

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