Javascript：根据单词改变单词颜色？

Question

我想根据单词是什么来更改句子中单词的背景颜色。

我希望用户能够像在文本区域中输入单词一样，但文本区域不支持单词背景颜色。

目前我只能想到这样的盗版解决方案：

var div = document.getElementById("div");

function highlight() {
  var words = div.textContent.split(" ");
  div.innerHTML = "";
  for (var i = 0; i < words.length; i++) {
    if (words[i] === "good") {
      div.innerHTML += "<span style=\"background-color: green;\">" + words[i] + "</span> ";
    } else if (words[i] === "bad") {
      div.innerHTML += "<span style=\"background-color: red;\">" + words[i] + "</span> ";
    } else {
      div.innerHTML += "<span>" + words[i] + "</span> ";
    }
  }
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(div.lastChild, 1);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
};
div.addEventListener("input", highlight);
highlight();

div {
  background-color: black;
  box-sizing: border-box;
  color: white;
  height: 128px;
  padding: 16px;
  width: 100%;
}

<div id="div" contenteditable="true">good and bad colors</div>

“好”一词的背景为绿色，“坏”一词的背景为红色。

然而，这是非常错误和可怕的，所以我希望有更好的方法来做到这一点。

任何帮助都会很棒！

Answer 1

for尝试使用数组方法，它们比循环更好用：

const div = document.getElementById("div");
function highlight() {
  const words = div.textContent.split(" ");
  div.innerHTML = "";
  words.forEach((word) => {
    const span = div.appendChild(document.createElement('span'));
    span.textContent = word + ' ';
    if (word === 'good') span.classList.add('green');
    if (word === 'bad') span.classList.add('red');
  });
};
div.addEventListener("blur", highlight);
highlight();

div {
  background-color: black;
  box-sizing: border-box;
  color: white;
  height: 128px;
  padding: 16px;
  width: 100%;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}

<div id="div" contenteditable="true">good and bad colors</div>