Question

对不起，这是一个令人困惑的问题。

我想根据单词的含义更改句子中单词的背景颜色。

我希望用户能够输入文字区域等字词，但文字区域不支持字背景色。

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

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

好的＆＃39;得到一个绿色的背景，并且“坏”这个词是＆＃39;获得红色背景。

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

任何帮助都会非常棒！

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>

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

1 个答案: