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

【问题标题】：Highlighting text within an input field突出显示输入字段中的文本
【发布时间】：2021-04-16 04:59:28
【问题描述】：

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

【问题讨论】：

stackoverflow.com/a/8644513/5321660 可能会有所帮助。在文本输入的键上调用 highlight()，并在 highlight() 的第一步中删除现有的突出显示。对于文本输入，使用 @Amadan 建议的 contenteditable。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这是我相信您正在努力实现的工作原型。它从文本输入中获取输入，并将其包含在类.highlight 的跨度中。它还会在执行此操作之前删除现有的亮点。虽然，在输入 contenteditable 时，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

【讨论】：