Download
User Rating: 4.9/5 ( 1 votes)
Highlight Textarea is a jQuery plugin which allows you to highlight words and sentences inside of <textarea> and <input> elements. Words are defined in a jQuery array and you can customize highlight color and case sensitivity. The highlighting updates itself when typing in the <textarea> and follows scroll and resizing (with jQuery-UI).
Source: mistic100.github.io
1. INCLUDE JS AND CSS FILES
<script src="dist/jquery/jquery.min.js"></script>
<script src="dist/jquery-ui/jquery-ui.min.js"></script>
<script src="dist/jquery-highlighttextarea/jquery.highlighttextarea.js"></script>
<link rel="stylesheet" href="dist/jquery-ui/theme/jquery-ui.min.css">
<link rel="stylesheet" href="dist/jquery-highlighttextarea/jquery.highlighttextarea.css">
2. HTML
<textarea cols="50" rows="5">...</textarea>
3. JAVASCRIPT
$('textarea').highlightTextarea({
words: ['Lorem ipsum', 'vulputate']
});
4. OPTIONS
|
Name |
type |
default |
description |
|
words |
array |
[] |
Either an array of words to highlight (can be regular expressions) or an array of objects containing:
-
color: color of this subset of words
-
words: array of words to highlight (can be regexes too)
|
|
ranges |
array |
[] |
Either an array of indexes pairs (start, end) or an array of objects containing:
-
color: color of this subset of ranges
-
ranges: array of indexes pairs
-
start
-
end or length
Provide ranges or start/end/length, but not both. |
|
color |
string |
'#FFFF00' |
Color used if words is an array of words or if ranges is an array of pairs. |
|
caseSensitive |
boolean |
true |
Set to false to make case insensitive words match |
|
resizable |
boolean |
false |
Should the textarea be resizable (requires jQueryUI Resizable) |
|
id |
string |
'' |
Identifier to add to the textarea container, don't use this parameter when initializing multiple textareas at once |
JS Tutorial
