为什么像 if, else ... 这样的元素没有突出显示？

Question

我正在为浏览器中的编辑器编写一个迷你代码。 任务：当输入 if, else, for ... 等词时，应突出显示它们。

textarea.addEventListener("input", function() {
  // Get the text inside the textarea
  const text = this.textContent;

  // Loop through each keyword and highlight it in the text
  for (let keyword of keywords) {
    const pattern = new RegExp("\\b" + keyword + "\\b", "g");
    const replacement = "<span class='highlight'>" + keyword + "</span>";
    const highlightedText = text.replace(pattern, replacement);
    this.innerHTML = highlightedText;
  }
});

<div name="code-space" id="code__space" contenteditable="true"></div>

也许我需要修改这个想法。我会很高兴收到建议。

Answer 1

这是你想要的吗？ 您在 HTML 中使用的是

contenteditable

div

，而不是

textarea

，因此我在可编辑文本的

input

事件中添加了我的更新：

var editor = document.querySelector('#code__space');

const keywords = ['if', 'else', 'for'];
let timeoutId;

editor.addEventListener('input', function() {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    var text = editor.textContent;

    for (let keyword of keywords) {
      const pattern = new RegExp('\\b' + keyword + '\\b', 'g');
      const replacement = '<span class="highlight">' + keyword + '</span>';
      text = text.replace(pattern, replacement);
    }

    editor.innerHTML = text;
  }, 1000);
});

.highlight {
  color: #bf0808;
  background: #b6b6b9;
  font-weight: bold;
}

#code__space {
  border: 1px solid #ccc;
  min-height: 100px;
  padding: 10px;
  direction: ltr;
  white-space: nowrap;
}

<div name="code-space" id="code__space" contenteditable="true" style="border: 1px solid blue; min-height: 2em"></div>