怎么在内容可编辑元素上为特定单词上色?

原学程将引见若何在实质可编纂元素上为特订单词汇上色?的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

怎么在内容可编辑元素上为特定单词上色? 教程 第1张

成绩描写

我正在测验考试制造1个编码编纂器,我的成绩是我想要在实质可编纂的div上为特定的单词汇上色,比方,假如用户编辑了以下代码:
function print(){}; function load(){};"函数"1词汇应涂成白色。

以下是我测验考试过的办法,没有幸的是它没有起感化,但是我想展现我的尽力以及我正在尽力完成的设法主意。

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轮回。假如Word在文原中,则文原将一直包含word(由于您只是添减到字符串中),而且while轮回将永久没有会停止。只需将其变动为if

数据-lang="js"数据-隐蔽="假"数据-掌握台="真"数据-巴贝我="假">

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

佳了闭于怎样在实质可编纂元素上为特订单词汇上色?的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。