javascript - 在 HTML 中查找单词

Question

我试图在 HTML 字符串中找到给定的单词并在其周围添加一个跨度。

我现在做的是这样的:

function find(what:String,where:String)
{
    var regexp:RegExp=new RegExp(what,'gi');
    return where.replace(regexp,'<span>$&</span>');
}

它适用于不在 HTML 标签内的单词。我想要的是忽略那些在 HTML 标签内的标签。

示例: find("spain")
输入:

The rain in <b class="spain">Spain</b> stays mainly in the <i data-test="Spain">plain</i>.

输出:

The rain in <b class="spain"><span>Spain</span></b> stays mainly in the <i data-test="Spain">plain</i>.

请问我怎样才能做到这一点？

Answer 1

为了说明可以匹配的 html 标记和属性，您将需要以某种方式解析该 HTML。最简单的方法是将其添加到 DOM(或仅添加到新元素):

var container = document.createElement("div");
container.style.display = "none";
document.body.appendChild(container);  // this step is optional
container.innerHTML = where;

解析后，您现在可以使用 DOM 方法迭代节点并仅查找文本节点并在这些节点上进行搜索。使用递归函数遍历节点:

function wrapWord(el, word)
{
    var expr = new RegExp(word, "i");
    var nodes = [].slice.call(el.childNodes, 0);
    for (var i = 0; i < nodes.length; i++)
    {
        var node = nodes[i];
        if (node.nodeType == 3) // textNode
        {
            var matches = node.nodeValue.match(expr);
            if (matches)
            {
                var parts = node.nodeValue.split(expr);
                for (var n = 0; n < parts.length; n++)
                {
                    if (n)
                    {
                        var span = el.insertBefore(document.createElement("span"), node);
                        span.appendChild(document.createTextNode(matches[n - 1]));
                    }
                    if (parts[n])
                    {
                        el.insertBefore(document.createTextNode(parts[n]), node);
                    }
                }
                el.removeChild(node);
            }
        }
        else
        {
            wrapWord(node, word);
        }
    }
}

这是一个工作演示:http://jsfiddle.net/gilly3/J8JJm/3