Highlight specific words in textarea

I had a chance that I need to highlight some invalid characters that users input in <textarea/> tag.

At first glance, I thought I could wrap all individual letters inside of <span> tag but I realized that textarea tag cannot contain any other child tags.

I researched some solution and found this nice plugin.

https://github.com/lonekorean/highlight-within-textarea

It has detailed guide here.

https://lonekorean.github.io/highlight-within-textarea/

You just need to place the JS and CSS file in your project.

And initiate the highlighter like below;

$('.array-example').highlightWithinTextarea({
    highlight: [
        'orange',
        /ba(na)*/gi,
        [0, 5]
    ]
});

You can set any kind of highlight conditions including string, regular expression, callback function, array etc.

That’s all! Cool?