我正在尝试创建代码编辑器,我的问题是,例如,如果用户编写了以下代码,我想给内容可编辑的div上的特定单词加上颜色:function print(){}; function load(){};
“功能”一词应涂成红色。
[这是我尝试过的方法,很遗憾,它不起作用,但我想展示自己的努力以及我要实现的目标。
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();
}
}
您的问题是您的while
循环。如果文字中包含单词,则文字将始终包含[C0](因为您只是将其添加到字符串中),并且word
循环将永远不会结束。只需将其更改为while
if