Question

使用Javascript，我试图在页面上的某些文本周围包装span标签，但我不想在一组span标签内包装标签周围的标签。

目前我正在使用：

html = $('#container').html();
var regex = /([\s|&nbsp;]*)(apple)([\s|&nbsp;]*)/g;
html = html.replace(regex, '$1<span class="highlight">$2</span>$3');

它可以工作，但是如果它在同一个字符串上使用了两次，或者如果字符串稍后出现在另一个字符串中，例如“一堆苹果”。然后是'苹果＆＃39;，我最终得到了这个：

<span class="highlight">a bunch of <span class="highlight">apples</span></span>

我不想让它取代苹果＆＃39;第二次，因为它已经在span标签内。

它应该匹配苹果＆＃39;这里：

Red apples are my <span class="highlight">favourite fruit.</span>

但不是在这里：

<span class="highlight">Red apples are my favourite fruit.</span>

我尝试过使用它，但它不起作用：

([\s|&nbsp;]*)(apples).*(?!</span)

任何帮助将不胜感激。谢谢。

Answer 1

首先，您应该知道使用正则表达式解析html通常被认为是一个坏主意 - 通常建议使用Dom解析器。有了这个免责声明，我将向您展示一个简单的正则表达式解决方案。

此问题是此问题中向"regex-match a pattern, excluding..."

解释的技术的典型案例

我们可以通过一个非常简单的正则表达式解决它：

<span.*?<\/span>|(\bapples\b)

交替|的左侧与完整的<span... /span>标记相匹配。我们将忽略这些匹配。右侧匹配并捕获apples到组1，我们知道它们是正确的，因为它们与左侧的表达式不匹配。

此程序显示如何使用正则表达式（请参阅online demo右侧窗格中的结果）。请注意，在演示中我替换为[span]而不是<span>，以便结果显示在浏览器中（解释html）：

var subject = 'Red apples are my <span class="highlight">favourite apples.</span>';
var regex = /<span.*?<\/span>|(\bapples\b)/g;
replaced = subject.replace(regex, function(m, group1) {
    if (group1 == "" ) return m;
    else return "<span class=\"highlight\">" + group1 + "</span>";
});
document.write("<br>*** Replacements ***<br>");
document.write(replaced);

参考

匹配不在span标签内的文本

1 个答案: