在 HTML 中查找单词

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

我现在正在做的是这样的：

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

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

Example:查找（“西班牙”）
Input:

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

Output:

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

请问我怎样才能实现这个目标？

为了考虑可能匹配的 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