jQuery Plugin To Highlight Text In Text Fields - highlightTextarea

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.

  • Publication date: 23.05.2018
  • Source