Highlighting Text In Textarea – highlight-ta.js

Preview:

Description:

highlight-ta.js is a pure JavaScript library that allows to apply different CSS styles on specific characters within your textarea element using RegExp. Also has the ability to dynamically adjust the textarea’s height to fit its content.

How to use it:

Import the highlight-ta’s JavaScript files into the webpage.

<script src="highlight-ta.js"></script>
<script src="highlight-ta-proto.js"></script>

Add the CSS ID to your textarea element and then wrap it into a DIV container as this:

<div id="highlight-div" class="my-class">
  <textarea id="highlight-ta"></textarea> 
</div>

Create a regular expression and initialize / instantiate prototype objects:

var re = new RegExp('CSSScript', 'g');
var taHlght = highlightta(document.getElementById('highlight-div'), 
document.getElementById('highlight-ta'), "mark-style", re);

This will wrap the character ‘CSSScript’ in the mark tag with the CSS class of ‘mark-style’. Then you can style the character whatever you like:

.mark-style {
  ...
}

API methods:

// Initialize or reset the textarea with init():
hlghtTa.init(div, ta, re, dclr);
hlghtTa.init(div, ta, re, dclr, false);
// Turn corners off:
hlghtTa.corners();
hlghtTa.corners(false);
// Release testarea from HighlightTa:
hlghtTa.remove();
// Get the text:
hlghtTa.getText();
// Get the CSSStyleDeclaration object:
hlghtTa.getComp();
// Set the z-index:
hlghtTa.setZ(2); //use a number
hlghtTa.setZ("2"); //or use a string
// Set the class for mark:
hlghtTa.setMark("class-name");
// Set the RegExp with JavaScript RegExp object:
hlghtTa.setRegex(RegExp);