在contendEditable div中为特定单词添加跨度？

Question

我有一个内容可编辑的div，以及JS函数来搜索输入中的某些单词。 如果找到匹配项，则div的内容将变为蓝色，但是我只希望匹配的单词变为蓝色。 我怎样才能做到这一点？ 这是我的JS ...

   function init() {

window.setInterval(function() {

    var div = document.getElementById("texty");
    var html = div.innerHTML;
    var buzzword = ["function","()","{", "}","[", "]",".getElementById", ".getElementsByClassName",".style","$"];

    for(var i = 0; i < buzzword.length; i++) 
    {
        var regex = new RegExp(buzzword[i], 'g');
        html = html.replace(regex, "<span style='color:blue'>" + buzzword[i] + "</span>");
    }

    div.innerHTML = html;

}, 100);


}

我的HTML是这个...

<div id="texty" contenteditable="true" onfocus="init()"></div>

Answer 1

获取div的html，然后进行正则表达式替换并在单词周围添加一个跨度。 代码如下所示：

    var escape= function(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
    };

    var div = document.getElementById("texty");
    var html = div.innerHTML;
    var buzzword = ["function","()","{", "}","[", "]",".getElementById", ".getElementsByClassName",".style","$"];
    for(var i = 0; i < buzzword.length; i++)
    {
        var regex = new RegExp(escape(buzzword[i]), 'g');
        html = html.replace(regex, "<span style='color:blue'>" + buzzword[i] + "</span>");
    }

    div.innerHTML = html;