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，以便我可以制定如下规则:

match everything which is not between <span and > but allow cascaded matchings like <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;
});

A live demo at jsFiddle .