JavaScript RegExp 匹配忽略 HTML 的文本

Question

是否可以在“The <strong>dog</strong> is really <em>really</em> fat!”中匹配“狗真的很胖”，并在其周围添加“<span class="highlight">WHAT WAS MATCHED</span>”？

我并不是特别指这个意思，但通常能够忽略 HTML 搜索文本，将其保留在最终结果中，并在其周围添加上面的 span 吗？

编辑:
考虑到 HTML 标签重叠问题，是否可以匹配一个短语并在每个匹配的单词周围添加跨度？这里的问题是，当“dog”不在搜索上下文中时，我不想匹配它，在这种情况下，“the dog really really fat”。

Answer 1

更新:

这是一个工作 fiddle ，可以满足您的需求。但是，您需要更新 htmlTagRegEx 来处理任何 HTML 标记的匹配，因为这只会执行简单的匹配，不会处理所有情况。

http://jsfiddle.net/briguy37/JyL4J/

此外，下面是代码。基本上，它一个一个地取出 html 元素，然后在文本中进行替换以在匹配的选择周围添加突出显示范围，然后一个一个地推回 html 元素。它很丑陋，但这是我能想到的让它工作的最简单方法...

function highlightInElement(elementId, text){
    var elementHtml = document.getElementById(elementId).innerHTML;
    var tags = [];
    var tagLocations= [];
    var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;

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

    //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(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 innerHTML of the element
    document.getElementById(elementId).innerHTML = elementHtml;
}