突出显示输入字段中的文本

Question

我正在尝试在 JS 中创建一个脚本，以突出显示用户键入的某些文本（有点像https://regex101.com/中的“测试字符串”框），但似乎无法更改文本在输入字段本身内，因为它正在被使用。 有谁知道我该怎么做？

Answer 1

无法设置input字段（或textarea ）内容的样式。

有两种方法可以伪造它。 第一个是contenteditable ，您可以在其中直接编辑 HTML 元素，例如<div> 。 这就是浏览器中大多数所见即所得编辑器的工作方式。 由于它是一个 HTML 元素，它可以有子结构，并且它的后代元素可以独立设置样式。

第二个，由 regex101 使用，工作量更大：用另一个元素覆盖真实的输入字段。 在那个网站上，您可能认为您正在编辑一个输入字段，但您的按键被一个假的（并且永远是空的） textarea捕获，它被一个显示漂亮颜色和框的div遮蔽。 每次按下一个键，textarea 就会被清空、移动和调整大小，键本身会应用于输入数据，然后将其呈现在 textarea 的顶部，使其模糊。 那里发生的一切都是由 JavaScript 伪造的，看起来、感觉和行为都像输入字段，但实际上并不存在。 执行此操作的代码非常复杂，超出了 Stack Overflow 问题的 scope 范围。

Answer 2

这是我相信您正在努力实现的工作原型。 它从文本输入中获取输入，并用 class .highlight将其封闭在一个跨度中。 它还会在执行此操作之前删除现有的亮点。 虽然，在输入内容可编辑时，contenteditable div 的焦点存在一些问题。

 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>

谢谢： https://stackoverflow.com/a/8644513/5321660