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.

$('#demo').highlightTextarea({
words: {
color: '#ADF0FF',
words: ['word1','word2']
}
});

3. Available options to customize the plugin.

$('#demo').highlightTextarea({
// 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:

2018-05-23

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

2016-09-17

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

2016-01-23

• v3.1.2

2015-05-06

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

2014-12-15

• update to v3.1.0

2014-08-03

• update to v3.1.0

2014-07-26

• incorrect highlight with ranges

2014-06-13

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