Javascript RegExp用於匹配不屬於HTML標記的文本

Question

我試圖找到一種突出顯示HTML中某些文本的方法。 給出了以下HTML：

<div>This text contains matching words like word1 and word2 and xyzword1xyz and word2xyz and xyzword2</div>

用<span>包圍的單詞列表為：

var array = ['word1','word2', 'word1word3'];

我目前的Javascript：

$.each(array , function(index, elem){
            if(elem.length<3 || elem === "pan" || elem === "spa" || elem === "span")return true;             
            var re = new RegExp(""+elem+"(?=([^']*'[^']*')*[^']*$)","gi");
            returnString = returnString.replace(re, "<span class='markedString colorword1orword2'>$&</span>");                
});

生成的div如下所示：

<div>This text contains matching words like <span class='markedString colorword1orword2'>word1</span> and <span class='markedString colorword1orword2'>word2</span> and xyz<span class='markedString colorword1orword2'>word1</span>xyz and <span class='markedString colorword1orword2'>word2</span>xyz and xyz<span class='markedString colorword1orword2'>word2</span> and finally <span class='markedString colorword1orword2'><span class='markedString colorword1orword2'>word1</span>word3</span></div>

由於當前的正則表達式， class='markedString colorword1orword2'內容都不匹配。

問題：如果數組看起來像

var array = ['word1','word2', 'class'];

我最終會

<div>This text contains matching words like <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word1</span> and <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word2</span> and xyz<span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word1</span>xyz and <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word2</span>xyz and xyz<span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word2</span> and finally <span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'><span <span class='markedString colorword1orword2'>class</span>='markedString colorword1orword2'>word1</span>word3</span></div>

該示例以某種方式構造，因此HTML標簽本身中可能包含其他單詞。

我需要一種模擬regexp-lookbehind的方法，以便可以制定如下規則：

匹配所有不在<span和>之間的東西，但允許級聯匹配，例如<span>adsa<span>asdsa</span></span>

是否有任何正則表達式大師都知道如何進行歸檔？

Answer 1

您可以嘗試這樣的操作（不循環）：

var $div = $('#the_id_of_ the_div'),
    array = ['word1','word2', 'word1word3'],
    re = new RegExp(array.join('|'), 'gi'),
    divHTML = $div.text().replace(re, "<span class='markedString colorword1orword2'>$&</span>");
$div.html(divHTML);

這只是一個例子，您可能從帖子片段之外的某個jQuery對象獲取div 。

---

編輯

如果包裝中有一堆div ，則可以執行以下操作：

var array = ['word1','word2', 'word1word3'],
    re = new RegExp(array.join('|'), 'gi');
$('#wrapper div').each(function () {
    var divHTML = $(this).text().replace(re, "<span class='markedString colorword1orword2'>$&</span>");
    $(this).html(divHTML);
    return;
});

jsFiddle上的現場演示 。