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.
You can find more demos and some code snippets on the demo page. And as before, the plugin is available as an npm package.