🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jQuery plugin for highlighting text in textarea.

Forms Plugins

Documentation

Build Status Coverage Status

jquery.textarea-highlighter.js

jQuery plugin for highlighting text in textarea

Screen Shot

screen shot

Usage

This is the basic usage in javascript:

// can be a class too $('.someElement') $('#someElement').textareaHighlighter({     matches: [         {             'priority': 2,                                // if there is overlap with other matches it will highlight a match that has a higher priority             'match': ['this is a test', 'text to match'], // will check for this matches             'matchClass': 'match'                         // this class will be added to the matching string         }, {             'priority': 1,             'match': /\{\/?\d+\}/g,             'matchClass': 'tags'         }, {             'priority': 0,             'match': ['some', 'more', 'here'],             'matchClass': 'someClass'         }     ],     maxlength: 150,     maxlengthWarning: 'warning',     maxlengthElement: $('#someElement').find('.maxlength') });

You also can add setting with data- attribute in HTML:

<textarea data-maxlength="150" data-debug="true"></textarea>

Events

textarea.highlighter.highlight

This event is triggered when all the highlighting is complete.

$('#someElement').on('textarea.highlighter.highlight', function() {     // do some cool stuff :) });

Methods

updateMatches

Update matches that needed to be highlighted

var matches = [{ 'matchClass': 'match', 'match': ['a','b'] }]; $('#someElement').textareaHighlighter('updateMatches', matches);

updateStyle

Update style added by plugin, use this when the textarea layout changes etc...

$('#someElement').textareaHighlighter('updateStyle');

updateHeight

Update textarea & plugins extra div's height

$('#someElement').textareaHighlighter('updateHeight');

destroy

Remove all added HTML/CSS and plugin related event bindings etc..

$('#someElement').textareaHighlighter('destroy');

debugModeOn

Turn debug mode on

$('#someElement').textareaHighlighter('debugModeOn');

debugModeOff

Turn debug mode off

$('#someElement').textareaHighlighter('debugModeOff');

All options

These are the supported options and their default values:

$.textareaHighlighter.defaults = {     wordBase: true,          // Word base language is English, German etc. Set to false when it's Japanese, Chinese etc.     caseSensitive: true,     // If matches should be case sensitive or not.     matches: [               // Array of matches with matchClass & word array         {             'priority': 1,                                // if there is overlap with other matches it will highlight a match that has a higher priority             'match': ['this is a test', 'text to match'], // will highlight text in this array             'matchClass': 'match'                         // this class will be added to the matching string         }     ],     isAutoExpand: true,      // Set to 'false' if you don't want to expand textarea on input     typingDelay: 30          // Typing delay in milliseconds     maxlength: -1,           // -1: disable, some int number over 0     maxlengthWarning: '',    // Class name to add to text when it's over max length     maxlengthElement: null,  // jQuery element to update letter count in the view     debug: false,            // Flag to show debug mode };

Benchmark sample

v0_4_8 is old version and v0_6_0 is the latest

PhantomJS 1.9.8 (Mac OS X)   Test with 5 matches: v0_6_0 at 16158 ops/sec (1.76x faster than v0_4_8)   Test with 10 matches: v0_6_0 at 3391 ops/sec (1.30x faster than v0_4_8)   Test with 25 matches: v0_6_0 at 1312 ops/sec (3.82x faster than v0_4_8)   Test with 50 matches: v0_6_0 at 606 ops/sec (8.40x faster than v0_4_8)   Test with 75 matches: v0_6_0 at 382 ops/sec (11.49x faster than v0_4_8) Chrome 39.0.2171 (Mac OS X 10.10.1)   Test with 5 matches: v0_6_0 at 27113 ops/sec (1.12x faster than v0_4_8)   Test with 10 matches: v0_4_8 at 8669 ops/sec (1.28x faster than v0_6_0)   Test with 25 matches: v0_6_0 at 2765 ops/sec (3.01x faster than v0_4_8)   Test with 50 matches: v0_6_0 at 1354 ops/sec (6.24x faster than v0_4_8)   Test with 75 matches: v0_6_0 at 916 ops/sec (318.10x faster than v0_4_8) Firefox 31.0.0 (Mac OS X 10.10)   Test with 5 matches: v0_6_0 at 31165 ops/sec (2.32x faster than v0_4_8)   Test with 10 matches: v0_6_0 at 6269 ops/sec (3.09x faster than v0_4_8)   Test with 25 matches: v0_6_0 at 3111 ops/sec (7.49x faster than v0_4_8)   Test with 50 matches: v0_6_0 at 1635 ops/sec (31.98x faster than v0_4_8)   Test with 75 matches: v0_6_0 at 1162 ops/sec (167.81x faster than v0_4_8) 

You May Also Like