如何用HTML标记包装文本，但排除某些HTML标记中的文本

Question

我正在创建一些函数来突出页面上的单词。这将在给定的单词周围包装跨度标签。我已经完成了这项任务，但还会再解释一下。

代码的工作方式是在页面第一次加载时使用innerHTML，并将其存储在内存中(因此我有原始内容的副本)。

然后，我获取innerHTML (称为copyInnerHtml)的副本--然后在copyInnerHtml上找到搜索单词，并将它们包装为<span id="find-iteration"> (其中迭代是唯一的数字，如find-0、find-1、find-2等)，并将页面的内容替换为copyInnerHtml。然后，当用户重新点击搜索按钮时，我首先将页面还原回原始的innerHTML内容，然后继续上面的操作。这个效果很好。

如何在HTML元素/属性中找到文本(网站副本)中仅用作值的单词和注释词。

示例，请考虑以下代码

 <div class="search">This is the search box</div>

现在，我想对单词" search “执行搜索。问题是，它会发现它两次。

如果不使用正则表达式，并且只使用JavaScript (请不要使用jQuery )，如何检测字符串是否是HTML的一部分？

这个JSFIDDLE应该使我所做的事情更清晰

现在，希望您注意到小提琴中的下面一行

<p class="changeMe">&nbsp;</p><p>&nbsp;</p>

请将此更新为

<p class="find">&nbsp;</p><p>&nbsp;</p>

你就会看到密码中断了。这就是我的意思，当我搜索一个单词时(在JSFIDDLE中，单词'find')，那么我只想通过网站副本进行搜索。

Answer 1

如您所知，您必须处理整个(或部分) DOM。在执行此操作时，您必须根据不想处理的标签黑名单交叉检查每个tagName。

下面是一个很小的例子，说明如何在中做到这一点：

var excludeElements = ['script', 'style', 'a', 'form', 'iframe', 'canvas'];

var markText = function(textToHighlight) {

    walk(document.body, textToHighlight, function(node, match, offset) {
        var abbrevNode = document.createElement("span");
        abbrevNode.appendChild(document.createTextNode(textToHighlight));
        abbrevNode.className="someClass";
    });

}

var walk = function(node, textToHighlight, callback) { 


    var child = node.firstChild;

    while (child) {
        switch (child.nodeType) {
        case 1:
            if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
                break;
            walk(child, textToHighlight, callback);
            break;
        case 3:
            var bk = 0;
            child.data.replace(textToHighlight, function(all) {
                var args = [].slice.call(arguments),
                    offset = args[args.length - 2],
                    newTextNode = child.splitText(offset+bk), tag;
                bk -= child.data.length + all.length;

                newTextNode.data = newTextNode.data.substr(all.length);
                tag = callback.apply(window, [child].concat(args));
                child.parentNode.insertBefore(tag, newTextNode);
                child = newTextNode;
            });
            break;
        }
        child = child.nextSibling;
    }

    return node;
};