JavaScript RegExp 匹配文本忽略 HTML

Question

是否可以在“ The <strong>dog</strong> is really <em>really</em> fat! ”中匹配“the dog is really really fat”並添加“ <span class="highlight">WHAT WAS MATCHED</span> ” 圍繞它？

我不是這個意思，但通常能夠搜索文本而忽略 HTML，將其保留在最終結果中，然后在上面添加跨度？

編輯：
考慮到 HTML 標簽重疊問題，是否可以匹配一個短語並在每個匹配的單詞周圍添加跨度？ 這里的問題是，當“狗”這個詞不在搜索的上下文中時，我不希望它匹配，在這種情況下，“狗真的很胖”。

Answer 1

更新：

這是一個可以完成您想要的工作的小提琴。 但是，您需要更新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;
}

Answer 2

Naah...只需使用舊的 RegExp ;)

var htmlString = "The <strong>dog</strong> is really <em>really</em> fat!";
var regexp = /<\/?\w+((\s+\w+(\s*=\s*(?:\".*?"|'.*?'|[^'\">\s]+))?)+\s*|\s*)\/?>/gi;
var result = '<span class="highlight">' + htmlString.replace(regexp, '') + '</span>';

Answer 3

使用 JQuery 的一種更簡單的方法是。

originalHtml = $("#div").html();

    newHtml = originalHtml.replace(new RegExp(keyword + "(?![^<>]*>)", "g"), function(e){
                      return "<span class='highlight'>" + e + "</span>";
                   });

$("#div").html(newHtml);

這對我來說很好用。

Answer 4

這是一個有效的正則表達式示例，用於排除 html 標簽和 javascripts 中的匹配項：

http://refiddle.com/lwy6

在 replace() 腳本中使用此正則表達式。

    /(a)(?!([^<])*?>)(?!<script[^>]*?>)(?![^<]*?<\/script>|$)/gi

Answer 5

this.keywords.forEach(keyword => {
  el.innerHTML = el.innerHTML.replace(
    RegExp(keyword + '(?![^<>]*>)', 'ig'),
    matched => `<span class=highlight>${matched}</span>`
  )
})

Answer 6

你可以用這個表達式</?\\w*>使用字符串替換，你會得到你的字符串

Answer 7

如果您使用 jQuery，則可以在包含您要搜索的文本的元素上使用text屬性。 鑒於此標記：

<p id="the-text">
  The <strong>dog</strong> is really <em>really</em> fat!
</p>

這將產生“這只狗真的很胖！”：

$('#the-text').text();

您可以對該文本進行正則表達式搜索，而不是嘗試在標記中進行搜索。

如果沒有 jQuery，我不確定從所有子元素中提取和連接文本節點的簡單方法。