如何使用 Javascript 添加突出显示？答案

【问题标题】：How to add highlighting with Javascript?如何使用 Javascript 添加突出显示？
【发布时间】：2019-09-27 13:45:02
【问题描述】：

我尝试制作一个文本编辑器并想添加一个语法荧光笔（我正在使用 div 元素）。代码工作得很好，但是当我输入一个新字符时，你输入的行会出现在文本的开头。这意味着我将在开头键入每个字符。

const editor = document.getElementById("text");
var text = editor.innerText;

editor.addEventListener("input", function() {
  text = editor.innerText;
  editor.innerHTML = text.replaceAll("console", "<font color='green'>console</font>");

  console.log(editor.innerHTML);
});

String.prototype.replaceAll = function(search, replacement) {
  var target = this;
  return target.replace(new RegExp(search, 'g'), replacement);
};

&lt;div id="text" contenteditable="true"&gt;&lt;/div&gt;

我有什么解决方案可以让这条线在开始时不走吗？我必须更换或移除某些东西吗？

【问题讨论】：

标签： javascript html syntax-highlighting

【解决方案1】：

这是因为您替换了每个字母上的内容。解决方案确实可以使用document.createRange() 方法并手动设置插入符号位置。您可以在 SO 上找到该问题的很多重复项。

一个快速的解决方法是使用不同的事件来替换文本。

例如：

const editor = document.getElementById("text");
var text = editor.innerText;

editor.addEventListener("focusout", function() {
  text = editor.innerText;
  editor.innerHTML = text.replaceAll("console", '<span class="highlighted">console</span>');

  console.log(editor.innerHTML);
});

String.prototype.replaceAll = function(search, replacement) {
  var target = this;
  return target.replace(new RegExp(search, 'g'), replacement);
};

.highlighted {
  color: green;
}

&lt;div id="text" contenteditable="true"&gt;Test string&lt;/div&gt;

由于我们只在用户停止关注 div 时替换文本，因此我们避免了插入符号被重置为开头的问题。

另一种选择是在单击 div 时使用覆盖在 div 顶部的输入元素，而不是使用 contenteditable。这给人一种用户正在更改 div 的错觉，而实际上他们是在真正的输入元素中输入内容，这将带来某些优势，例如 div 默认缺少的 onchange 事件。

PS：<font> 已经过时多年了。正如规范所述，它仍然可以在许多浏览器中使用，但可以随时删除。您可以使用 span 和 CSS 作为替代方案。

【讨论】：

这确实有效，但只有当您点击文本框外才会为文本着色...
这就是once the user stops focussing 在我的解释中的意思。我应该用不同的措辞吗？如果它必须在每次按键时出现，那么 OP 可能会被.createRange() 卡住，为此我们已经在 SO 上提供了多种解决方案。如果您愿意，我们可以将此标记为重复。
由于 OP 正在制作文本编辑器，我们还可以将相同的函数绑定到按键事件以用于返回和输入按钮以及所有“文档退出”事件。由于 OP 使用 div，因此新行可能是要插入的新 div。

【解决方案2】：

当我在打电话时无法给出完整的答案，但谷歌文本范围和插入符号位置以及一些指南应该会弹出。您要做的是在更改内容之前获得 carret 偏移然后恢复它。

【讨论】：