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.