I'm trying to create a script in JS that highlights certain text as it's typed by the user (sort of like the "Test String" box from /), but can't seem to change the text within the input field itself as it's being used. Does anyone know how I can do this?

I'm trying to create a script in JS that highlights certain text as it's typed by the user (sort of like the "Test String" box from https://regex101./), but can't seem to change the text within the input field itself as it's being used. Does anyone know how I can do this?

• javascript
• html
• regex

• 1 stackoverflow./a/8644513/5321660 might help. Call highlight() on text input's key up, and remove the existing highlight as the very first step in highlight(). For the text input, Use a contenteditable as @Amadan suggested. – Ajith Gopi Commented Apr 16, 2021 at 5:20
• I got to this question searching for a way to select (i.e. highlight) a portion of an input text. I found this native javascript method setSelectionRange, in case it's useful to someone else. – Kapcash Commented Dec 11, 2023 at 21:14

2 Answers 2

It is not possible to style the contents of an input field (or a textarea).

There are two ways to fake it. The first one is contenteditable, where you can directly edit a HTML element such as <div>. This is how most WYSIWYG editors in browsers work. Since it is a HTML element, it can have substructure, and its descendant elements can be styled independently.

The second, used by regex101, is much more work: overlaying the real input field with another element. On that website, you may think you are editing an input field, but your keypresses are captured by a fake (and perpetually empty) textarea, which is obscured by a div that displays the nice colours and boxes. Every time you press a key, the textarea is emptied out, moved and resized as appropriate, the key itself is applied to the input data, which is then rendered on top of the textarea, obscuring it. Everything happening there is faked by JavaScript to look, feel and behave like an input field, but it does not actually exist. The code that does this is quite intricate, and outside the scope of a Stack Overflow question.

Here's a working prototype of what I believe you are trying to achieve. It gets the input from text input and encloses it in a span with class .highlight. It also removes existing highlights before performing this action. Although, there are some problem with contenteditable div's focus while typing in content editable.

function highlight() {
  var inputText = document.getElementById("inputText");
  var text = document.getElementById("highlighter").value;

  var innerHTML = inputText.innerHTML.replaceAll(/\<span class\=\"highlight\"\>(.*?)\<\/span\>/gi, "$1").replaceAll(text, '<span class="highlight">' + text + "</span>");
  inputText.innerHTML = innerHTML;
}

.highlight {
  background-color: yellow;
}

<input type="text" id="highlighter" onkeyup="highlight()">
<div id="inputText" contenteditable onkeyup="highlight()">
  The fox went over the fence fox
</div>

Thanks: https://stackoverflow./a/8644513/5321660