Two years ago, I published a jQuery plugin that allows you to highlight spans of text inside a <textarea>. I’m not talking about selecting text with the mouse. I’m talking about applying custom styles to arbitrary spans of text. Such a thing isn’t normally possible (any markup within a <textarea> is displayed literally), so my plugin fakes it with some very specific CSS and JavaScript.
Version 2.0
Anyway, now that I’ve reintroduced it, I’m happy to announce version 2.0 of highlight-within-textarea. I’ve taken some feedback and made using the plugin simpler and more flexible.
- Specify what to highlight as a string, regex, range of indexes, or a custom function.
- Use an array to specify multiple highlights, using a mix of any of the above.
- Declare CSS class names to visually distinguish multiple highlights.
- Manually trigger a highlighting update (useful if you have JavaScript directly manipulating the contents of the
<textarea>). - Fully backwards compatible with version 1.x syntax.
We’ll Do It Live
Check out this demo to see it in action.
See the Pen Highlight Within Textarea v2 by Will Boyd (@lonekorean) on CodePen.
You can find more demos and some code snippets on the demo page. And as before, the plugin is available as an npm package.