JavaScript：删除 HTML 标签、修改标签/文本以及重新插入标签

我正在尝试找到一种方法来删除 HTML 文档中的所有标签，存储它们的位置，修改剩余的文本，然后将标签重新插入它们所属的位置。

关键点

• I need to insert the tags back in again later, thus I need to store the location of each tag
  • 因此，建议使用 DOMParserhere https://stackoverflow.com/questions/822452/strip-html-from-text-javascript/47140708#47140708不管用
• 这将在外部网站上完成，而不是我自己的网站
• The regex suggested here https://stackoverflow.com/a/822464/3006096 (/<(?:.|\n)*?>/gm) will work, but it also falsely captures < or > included the html
  • 例子：https://regexr.com/3npfv https://regexr.com/3npfv
• 看来这有效：https://regexr.com/3npgn https://regexr.com/3npgn (/<[^<|>]*>/g），但我读到使用正则表达式并不是解析 html 的好方法。有没有失败的情况？

完整代码：

function foo() {
    var elementHtml = document.body.innerHTML;
    var tags = [];
    var tagLocations = [];
    //var htmlTagRegEx =/<{1}\/{0,1}\w+>{1}/;
    var htmlTagRegEx =/<[^<]*>/;

    //Strip the tags from the elementHtml and keep track of them
    var htmlTag;
    while (htmlTag = elementHtml.match(htmlTagRegEx)) {
        console.log('htmlTag: ', htmlTag);
        tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
        tags[tags.length] = htmlTag;
        elementHtml = elementHtml.replace(htmlTag, '');
    }
}

EDIT

为了避免混淆，以下是我想要完成的任务的详细说明：

在整个（外部）网站（不包括标签）的文本中搜索字符串，然后更改这些实例的样式（例如颜色）（如果找到）。

这是我的尝试：

    function highlightInElement(elementId, text) {
        var elementHtml = document.body.innerHTML;
        var tags = [];
        var tagLocations = [];
        //var htmlTagRegEx =/<{1}\/{0,1}\w+>{1}/;
        var htmlTagRegEx =/<[^<]*>/;
        //Strip the tags from the elementHtml and keep track of them
        var htmlTag;
        while (htmlTag = elementHtml.match(htmlTagRegEx)) {
            //console.log('htmlTag: ', htmlTag);
            tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
            tags[tags.length] = htmlTag;
            elementHtml = elementHtml.replace(htmlTag, '');
        }
        console.log('elementHtml: ', elementHtml);

        //Search for the text in the stripped html
        var textLocation = elementHtml.search(text);
        if (textLocation) {
            //Add the highlight
            var highlightHTMLStart = '<span class="highlight">';
            var highlightHTMLEnd = '</span>';
            elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

            //plug back in the HTML tags
            var textEndLocation = textLocation + text.length;
            for (let i = tagLocations.length - 1; i >= 0; i--) {
                var location = tagLocations[i];
                if (location > textEndLocation) {
                    location += highlightHTMLStart.length + highlightHTMLEnd.length;
                } else if (location > textLocation) {
                    location += highlightHTMLStart.length;
                }
                elementHtml = elementHtml.substring(0, location) + tags[i] + elementHtml.substring(location);
            }
        }

        //Update the html of the element
        document.body.innerHTML = elementHtml;
    }

    highlightInElement(document.documentElement, fooInputTxt.value);

为了避免混淆，下面详细解释了我想要完成的任务：在整个（外部）网站（不包括标签）的文本中搜索字符串，然后更改这些实例的样式（例如颜色）（如果找到） 。

那么这正是你应该做的:)

首先，构建一个递归函数来遍历 DOM 并获取所有文本节点：

function findTextNodes(node, ret) {
    var c = node.childNodes, i, l = c.length;
    for( i=0; i<l; i++) {
        switch(c[i].nodeType) {
            case 1: // element node
                findTextNodes(c[i], ret);
                break;
            case 3: // text node
                ret.push(c[i]);
                break;
        }
    }
}
var textNodes = [];
findTextNodes(document.body, textNodes);

现在您已经拥有了文档中所有文本节点的数组，您可以开始在它们中搜索您的目标。

function searchTextNodes(nodes, search) {
    var results = [], l = nodes.length, i,
        regex = new RegExp(search,'i'), match,
        span;
    for( i=0; i<l; i++) {
        while( (match = nodes[i].nodeValue.search(regex)) > -1) {
            nodes[i] = nodes[i].splitText(match);
            span = document.createElement('span');
            span.classList.add('highlight');
            nodes[i].parentNode.insertBefore(span, nodes[i]);
            nodes[i].splitText(search.length);
            span.appendChild(nodes[i]);
            nodes[i] = span.nextSibling;
        }
    }
}
searchTextNodes(textNodes, fooInputTxt.value);

而且……就是这样！为了获得额外的积分，以下是“撤消”搜索的方法：

function undoSearch(root) {
    var nodes = root.querySelectorAll("span.highlight"),
        l = nodes.length, i;
    for( i=0; i<l; i++) {
        nodes[i].parentNode.replaceChild(nodes[i].firstChild, nodes[i]);
    }
    root.normalize();
}
undoSearch(document.body);

JSFiddle 上的演示 https://jsfiddle.net/35L5seL9/1/