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.