Highlight Within Textarea

Some demos and code snippets for using the plugin. Edit textareas to see the real-time highlighting. View page source to see the CSS.

Go to GitHub repo Go to npm package


Note that this is case-insensitive.


Don't forget the g (find all) and i (case-insensitive) flags if you need them.

Array of Two Numbers (Range)

An array of exactly two numbers is treated as a range. Highlighting starts at the first character index (inclusive) and ends at the second character index (exclusive).

Array of Other Things

You can highlight multiple things, using any types mentioned here, with an array.


You can use a function for custom logic. It can return any of the types mentioned here. Return anything falsey (false, undefined, etc.) to indicate no highlighting. The current textarea input is provided to it for convenience.

Custom Object (with Class Name)

Any type mentioned here can be put in an object wrapper with highlight and className properties. This lets you set CSS classes in the highlight markup for custom styling, such as changing the highlight color.