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

Question

我想要某种 html 格式的输入字段，如 textarea，或可编辑以突出显示特殊单词(如 Hi 或 foo)的 div。我知道那里有一些语法高亮脚本 - Prettify、Syntax Highlighter、highlight.js 等。但是必须大量调整它们，因为“HI”不是编程语言中的标记。我不知道该怎么做/自己编写代码。

(我想到了某种 string.split by chars 然后将这些字符加在一起直到我有“HI”，但是我不知道如何给这些词着色。用颜色跨度？但是如果单词被删除，我将如何删除该跨度？)

你有什么建议吗？

提前致谢

Answer 1

这是 JSFiddle 中的一个简单示例(注意关于模糊的更新)

JSFiddle

https://jsfiddle.net/ug7xmgx0/3/

HTML

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

JS

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

CSS

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

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