jquery.textarea-highlighter.js
jQuery plugin for highlighting text in textarea
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)