Lightweight-Textarea-Highlighter

Native JS library to allow you to highlight ranges within <textarea>s

Introduction

It is not normally possible to highlight ranges within a normal HTML5 <textarea>. However by placing an exact copy of the text behind the <textarea> and highlighting that, you can get the appearance of highlighting within a text area.

This project was inspired by things like Will Boyd’s textarea highlighter tutorials such as his JQuery Plugin to get the same effect and Gary Sieling’s JQuery-UI Plugin.

However, as you may notice, both of these solutions depend on JQuery. While JQuery certainly has its uses, what good is forcing small projects to include a massive library like JQuery for a simple feature like this that can be done easily in pure native Javascript.

After Trying both of them for one of my projects, I decided both were too heavy for the work I was doing and decided to make my own library in pure native Javascript.

Disclaimer: this project is very janky and still a work in progress, It should not be used as a serious library for serious projects, please consider the aforementioned jquery solutions if you need a fully fledged solution.

Usage

On the releases page you will find lwtah.js(~5 KB) and lwtah.min.js (~3 KB), to enable the library copy one of these files into your project, include it with a script tag in the head, and you’re good to go, it’s that easy.

<script src="lwtah.min.js"></script>

<script src="lwtah.js"></script>

Once included, the library exposes a few functions and globals prefixed with lwtah to be accessed, however most of them are for internal use, The only three functions that should be used externally are:

lwtahAddRange(textAreaId, range, color) Adds a range to be highlighted within a textarea

textAreaId: The id of the <textarea> to apply highlight to as a string
range: The range to highlight as an array in the form [start_index, end_index],start_index must be greater then 0, start_index must be less then end_index, and end_index must not exceed the length of text in the text box.
color: The color of the highlight, any valid css color string.

lwtahClear(textAreaId) Removes all highlights from the given textarea

textAreaId: The id of the <textarea> to apply highlight to as a string

lwtahUpdate(textAreaId) call to update highliging if textarea’s .value or .innerHTML is modified by a script rather then input

textAreaId: The id of the <textarea> to apply highlight to as a string

See examples in the /example/ folder for some sample code using these functions as you would in a normal project.

Limitations

This project isn’t fully completed there are quite a few restrictions on usage

When adding ranges via lwatahAddRange, ranges must be added in the order that they appear in the textbox, not doing so will cause undefined behavior.
When adding ranges via lwatahAddRange, ranges may not overlap, having overlapping ranges will cause undefined behavior

Comparison

Author	Library	Min bytes Imported
Will Boyd	highlight-within-textarea	82.2 KB
Garry Sieling	jquery-highlighttextarea	357.7 KB
James Oswald	Lightweight-Textarea-Highlighter	2.6 KB

Calculations:
highlight-within-textarea:
70.6 KB : jquery-3.5.1.slim.min.js
10.6 KB : jquery.highlight-within-textarea.js
0.959 KB : jquery.highlight-within-textarea.css
+----------------------------------------------------------
82.2 KB

jquery-highlighttextarea:
70.6 KB jquery-3.5.1.slim.min.js
31.3 KB : jquery-ui.min.css
247 KB : jquery-ui.min.js
7.91 KB : jquery.highlighttextarea.min.js
0.915 KB jquery.highlighttextarea.min.css
+----------------------------------------------------------
357.7 KB

Lightweight-Textarea-Highlighter:
2.52 KB : lwtah.min.js
+----------------------------------------------------------
2.52 KB