如何为内容可编辑元素上的特定单词着色？

Question

我正在尝试制作一个编码编辑器，我的问题是我想为可编辑的内容上的特定单词着色 div 例如，如果用户编写了以下代码： function print(){}; function load(){}; "function" 这个词应该是红色的。

这是我尝试过的方法，不幸的是它不起作用，但我想展示我的努力和我正在努力完成的想法。

let editor = document.getElementById("editor");

editor.oninput = () => {
    editor.innerHTML = colorWord(editor.innerHTML, "function");
    caretAtEnd(editor);
}

function colorWord(text, word) {
    while (text.includes(word)) {
        text = text.replace(word, "<span style='color:blue;'>" + word + "</span>");
    }
    return text;
}

function caretAtEnd(element) {
    element.focus();
    if (typeof window.getSelection != "undefined" &&
        typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(element);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(element);
        textRange.collapse(false);
        textRange.select();
    }
}

Answer 1

你的问题是你的 while 循环。如果单词在文本中，文本将始终包含 word（因为您只是添加到字符串）并且您的 while 循环将永远不会结束。只需将其更改为 if

function colorWord(text, word) {
    if (text.includes(word)) {
        text = text.replace(word, "<span style='color:blue;'>" + word + "</span>");
    }
    return text;
}

Answer 2

您的函数 colorWord(text, word) 永远不会前进到下一个单词，事实上，正如已经提到的那样，它是一个无限循环。 .includes 将始终找到第一个实例，并且由于您的代码在替换时仍然包含该词，因此它永远不会前进。

不过，如果您使用的是正则表达式，则替换可以是全局的。正则表达式和 string.replace 是您要查找的内容：

function colorWord(text, word) {
  const re = new RegExp(word, 'gi'); // this will output /word/gi, with 'word' being whatever value the parameter is
  return text.replace(re, `<span style='color:blue;'>${word}</span>`);
}

console.log(
  colorWord('apples are round, and apples are juicy.', 'apples')
)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

如何为内容可编辑元素上的特定单词着色？

How can I color specific words on content editable element?

html

javascript

css

contenteditable