Highlight Text Inside a Textarea
Let’s start with the bad news. You can’t actually highlight text in a
<textarea>. Any markup you would add to do so would simply display as plain text within the
This article will show you how to pull it off, but if you just want the solution, feel free to go straight to the jQuery plugin: highlight-within-textarea.
Way back in 2010, I made a site called Regex Storm that would highlight regex matches in a
<textarea>, like this. It’s not hard to imagine other applications for this sort of “find and highlight” functionality. 5 years is a long time though, so I decided to revisit the concept and fix it up for modern browsers.
The basic idea is to carefully position a
<div> behind the
<textarea> to the
<div> to highlight text, which will show through the
<textarea>, completing the illusion.
A demo should make this all clear. Scroll around and edit the text. Then click Toggle Perspective and edit and scroll some more.
It takes a couple of elements to achieve the layout we need.
<div> simply serves as an anchor to position other elements within. The highlights
<div> is nested within the backdrop
<div>, which may seem like 1 more
<div> than we need, but doing it this way fixes some subtle scrolling bugs (which we’ll get to later).
<mark> tag is the best semantic choice for highlighting text inside the highlights
Elements must be laid out with pixel perfection. This can be tricky, as many browsers have very subtle differences that normally aren’t worth caring about, but are very noticeable in this case.
For example, Firefox adds a single pixel of
margin to the top and bottom of a
<textarea>. And iOS adds a
<textarea>. So we have to fix these styles (and others I haven’t specifically mentioned).
CSS is used to make text inside the highlights
<div> wrap and scroll exactly like the text inside the
It’s also important to set the visibility of things so that our stacked elements display properly together. Remember, the
<textarea> sits on top of the highlights
- Keep text in the highlights
<div>synced with text in the
- Highlight text in the highlights
- Make the highlights
<div>scroll in tandem with the
Let’s start by binding 2 events.
input event triggers whenever text in the
<textarea> is changed. The callback function takes this text, applies highlights to it, then inserts it into the highlights
And here’s the
applyHighlights() actually does 2 things. On line 3, it fixes a bug where a trailing carriage return causes the highlights
<div> to become misaligned. Then on line 4, it does the actual highlighting by inserting
<mark> tags. The regex in this example highlights all capitalized words, but this can be customized.
scroll callback copies the scroll position of the
<textarea> to the backdrop
<div>, so that they both scroll in tandem.
That covers the basic mechanics of (fake) highlighting within a
<textarea>. Please note that there are some finer details that this article didn’t discuss and the demo didn’t account for. For the more comprehensive, more bullet-proof solution, check out the highlight-within-textarea jQuery plugin on GitHub.