Skip to content
Highlight text inside a textarea with vanilla JS.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
node
src
LICENSE Initial commit Feb 12, 2017
README.md
index.html
regex-test.html

README.md

Highlight-Ta

Abstract

Use a regexes, strings, and functions to highlight text inside a textarea.

Checkout this demo. You can experiment with regexes.

Details

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.

Usage

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 = "&ltmark 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();

Compatability

Browser Works
Firefox Yes
Chrome Yes
Safari Yes
IE Yes
Edge Yes
Opera Not yet tested
Android Yes
iOS Not yet tested

License

Highlight-Ta is release under the GNU [MIT(https://opensource.org/licenses/MIT) license.

You can’t perform that action at this time.