Native JS library to allow you to highlight ranges within <textarea>s
!!!Disclaimer!!!: this project is very janky. It should not be used as a serious library for serious projects, please consider the later jquery solutions if you need a fully fledged solution.
Run the following examples, you can find their source code in the /example/ folder.
Real Application:
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.
On the releases page (or in the build dir) 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>
Or
<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 stringrange: 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 stringlwtahUpdate(textAreaId) call to update highlighting 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 stringThis project is extremely lightweight and there are a few restrictions on usage
1) When adding ranges via lwtahAddRange, ranges must be added in the order that they appear in the textbox, not doing so will cause undefined behavior.
2) When adding ranges via lwtahAddRange, ranges may not overlap, having overlapping ranges will cause undefined behavior
| Library | Min bytes Imported |
|---|---|
| highlight-within-textarea | 82.2 KB |
| jquery-highlighttextarea | 357.7 KB |
| 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