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.
- Single text box with some highlights
- Multiple text boxes with dif fonts and colors
- Dynamically adding and removing highlights
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 string
lwtahUpdate(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 string
This project is extremely lightweight and there are a few restrictions on usage
-
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.
-
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