Javascript 突出显示输入字段html中的单词

我想要一些html中的输入字段，比如textarea，或者一个可以编辑的div来突出显示Hi或foo等特殊单词。我知道有一些语法突出显示脚本——Prettify、syntax Highlighter、highlight.js等等。但是必须对它们进行大量调整，因为“HI”在编程语言中不是标记。我不知道自己该怎么做

（我想到了某种字符串。按字符分割，然后将这些字符添加到一起，直到我有了“HI”，例如，但我不知道如何给这些单词上色。用颜色span？但如果删除该单词，我将如何删除该span？）

你有什么建议吗

---

提前感谢

这里有一个简单的JSFIDLE示例 （注意模糊更新）

JSFiddle

HTML

<div id="textInput" type="text"contenteditable="true">
 Example on foo bar
</div>

---

有很多方法可以做到这一点。这是一个非常简单的方法，但不是非常有效或专注于用户体验。

谢谢你的回答，但是使用你提到的方法，我只能突出一个词，而不是“嗨”和“福”。（我认为）你不能用输入来做那件事。您需要使用div（或者span？）并设置type=“text”。在进行更改时，您需要解析div并添加突出显示span…好的，但是我如何在contenteditable中侦听onChange？不管怎样，找到它：）谢谢！这是可行的，但是只有在我单击div外的时候它才会被调用。我如何在onChange事件中实现这一点？我添加了这个onClick函数：addEventListener（“input”，highlight，false）；每当文本更改时，都会执行Highlight。我应该在函数中添加什么？刚刚得到，但现在我面临另一个问题：（当我更新div时，插入符号被置于起始位置，并且没有保持在原位……你知道如何解决这个问题吗？你可以使用

keyup

这将在每次按键后触发。在本例中，你将替换

change

上的文本，这将导致光标移动到起始位置。你应该研究如何保持插入符号的位置。）他将光标放在替换文本上以解决这个新请求。开始：我使用了这个：并在函数之前调用了doSave，在函数完成后调用了doLoad。它现在可以工作了，所有内容都正确着色，但我不能再做换行了。。。

$(document).ready(function () {
  var handleChange = function(e) {
    var newVal = '';
        var words = $('div').text().split(' ');
    $(words).each(function(key, val){
      newVal += `<span class="${val}">${val}</span> `;
    });
    $('div').html(newVal);
  };
  $('div').blur(handleChange);
  handleChange();
});

.on {
  color: red;
}
.foo {
  color: yellow;
}