如何用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（或部分DOM）。 在執行此操作時，您必須對照不想處理的標簽黑名單對每個tagName進行交叉檢查。

這是一個如何在普通javascript中完成此操作的小示例：

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