用于匹配文本的Javascript RegExp，而不是't是HTML标记的一部分

Javascript RegExp for matching text which isn't part of HTML tag

本文关键字：HTML 一部分 文本 Javascript RegExp 用于      更新时间：2023-09-26

我试图找到一种方法来突出显示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>

由于当前的regexp，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查找的方法，这样我就可以制定一个规则，比如：

匹配不在<span和>之间但允许级联的所有内容<span>adsa<span>asdsa</span></span> 等匹配

任何regexp大师都知道如何归档吗？

您可以尝试这样的操作（无循环）：

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的现场演示。

相关文章：