Question

我想要像textarea这样的html中的某种输入字段，或者想要突出显示Hi或foo等特殊字词的div。我知道有一些语法突出显示脚本 - Prettify，Syntax Highlighter，highlight.js等。但是必须对它们进行相当大的调整，因为＆＃34; HI＆＃34;不是编程语言中的标记。我不知道如何自己做这个/代码。

（我已经想过某种字符串。字符串，然后将这些字符添加到一起，直到我有＃34; HI＆＃34;例如，但我不知道如何着色然后是那些单词。如果单词被删除，我将如何删除该跨度？）

你有建议吗？

提前致谢

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;
}

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

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

1 个答案: