Use a regexes, strings, and functions to highlight text inside a textarea.
Checkout this demo. You can experiment with regexes.
Highlight-Ta is a stand-alone script that uses a regular expressions, strings, and functions to highlight text inside a textarea. It also adjusts that textarea's height to fit its text while following CSS declarations like box-sizing, padding, and min/max height. Highlight-Ta was created for designers and developers who need to highlight text in a textarea without relying on jQuery or weighty third-party libraries.
Grab highlight-ta.js and add it to your resources or install via npm:
npm install highlight-ta
...
const hlghtta = require("highlight-ta");Start with a <textarea> inside a <div> element:
<div id="highlight-div" class="someclass">
<textarea id="highlight-ta"></textarea>
</div>Then create an object of rules with following patterns:
// create patterns with strings!
var patterns = {
"pattern1": {"pattern": "Hello, world!"},
"pattern2": {"pattern": "Goodbye, universe!"},
}// create patterns with regexes
var regexp0 = new RegExp("[A-Z][a-z]*", "g");
var regexp1 = new RegExp("\\b(S|s)[a-z]*", "g");
var patterns = {
"pattern1": {"pattern": regex0},
"pattern2": {"pattern": regex1},
}By default, Highlight-Ta will use the default style for elements. Create a custom CSS declaration with a <mark> element and include them with a "css" key:
.myClass0 {
background-color: rgba(80, 244, 66, 0.7);
border-radius: 2px;
}
.myClass1 {
background-color: rgba(100, 34, 79, 0.7);
border-radius: 2px;
}// add the "css" key.
var patterns = {
"pattern1": {"pattern": "Hello, world!", "css": "myClass0"},
"pattern2": {"pattern": "Goodbye, universe!", "css": "myClass1"},
}You can create custom functions by carefully following this pattern:
// you don't need pattern or function keys, they'll be ignored
var patterns = {
"myPattern1": {"function": function(t) {
var m = "<mark id='some-id' style='some-class'>$&</mark>";
t = t.replace(new Regex("[a-z]*", "g"), m);
return t;
}
},
"myPattern2": {"function": function(t) {
var m = "<mark id='dif-id' style='diff-class'>$&</mark>";
t = t.replace(new Regex("[A-Z]*", "g"), m);
return t;
}
}Next, pass the <div>, <textarea>, RegExp, to initialize a new instance of Highlight-Ta.
// was a little work but you made it!
var div = document.getElementById('cntr-div');
var ta = document.getElementById('hlght-ta');
var patterns = {
"pattern1": {"pattern": "Hello, world!", "css": "myClass0"},
"pattern2": {"pattern": "Goodbye, universe!", "css": "myClass1"},
}
var hlghtTa = hlghtta(div, ta, patterns);
// Initialize highlight-ta after instantiating
var hlghtTa = hlghtta();
hlghtTa.init(div, ta);
// Set Highlights after instantiating
hlghtTa.setHighlights(patterns);That's all. The intention is to keep style and function separate. Style the <div> element and the style the <textarea>. Highlight-Ta will respond to all styles and media queries.
If you're wondering, "why not dynamically create a textarea inside the div?" The main advantage is input won't be lost if the page accidentally is accidentally refreshed.
There are also a few helper methods:
// Turn corners off
hlghtTa.setCorners(false);
// Turn corners on
hlghtTa.setCorners(true);
// Remove elements and event listeners
hlghtTa.destroy();| Browser | Works |
|---|---|
| Firefox | Yes |
| Chrome | Yes |
| Safari | Yes |
| IE | Yes |
| Edge | Yes |
| Opera | Not yet tested |
| Android | Yes |
| iOS | Not yet tested |
Highlight-Ta is release under the GNU [MIT(https://opensource.org/licenses/MIT) license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent