不在span标签内匹配文本 [英] Match text not inside span tags

问题描述

使用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'）; 
  

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

 < span class =突出显示>一堆< span class =highlight>苹果< / span>< / span> 
  

我不希望它第二次替换苹果，因为它已经在span标签内。

它应该与'苹果'匹配：

 红苹果我的< span class =highlight>最喜欢的水果。< / span> 
  

但不在这里：

 < span class =highlight>红苹果是我最喜欢的水果。< / span> 
  

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

 （[\s |& nbsp;] *）（apples）。*（？！  

任何帮助将不胜感激。首先，你应该知道用正则表达式解析html通常被认为是一个糟糕的主意 - 一个Dom解析器通常是推荐的。有了这个免责声明，我会告诉你一个简单的正则表达式解决方案。

这个问题是在这个问题中解释为\"regex-match模式，不包括...

我们可以用一个精美的图形来解决它，简单的正则表达式：

 < span。*？< \ / span> |（\bapples\b）
  

交替 | 的左侧匹配完成< span ... / span> 标签。我们将忽略这些匹配。右侧将 apples 与第1组进行匹配并捕获，我们知道它们是正确的，因为它们没有与左侧表达式匹配。

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

  var subject ='红苹果是我的< span class =highlight >最喜爱的苹果。< / span>'; 
 var regex = /<span.*?<\/span>|(\bapples\b)/g; 
 replacement = subject.replace（regex，function（m，group1）{
 if（group1 ==）return m; 
 else return< span class = \highlight \>+ group1 +< / span>; 
}）; 
 document.write（< br> ***替换***< br>）; 
 document.write（替换）; 
  

参考

• 如何匹配（或替换）一个模式，除了情况s1，s2，s3 ...... a>


• 有关匹配模式的文章，除非。 ..

Using Javascript, I'm trying to wrap span tags around certain text on the page, but I don't want to wrap tags around text already inside a set of span tags.

Currently I'm using:

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

It works but if it's used on the same string twice or if the string appears in another string later, for example 'a bunch of apples' then later 'apples', I end up with this:

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

I don't want it to replace 'apples' the second time because it's already inside span tags.

It should match 'apples' here:

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

But not here:

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

I've tried using this but it doesn't work:

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

Any help would be appreciated. Thank you.

解决方案

First off, you should know that parsing html with regex is generally considered to be a bad idea—a Dom parser is usually recommended. With this disclaimer, I will show you a simple regex solution.

This problem is a classic case of the technique explained in this question to "regex-match a pattern, excluding..."

We can solve it with a beautifully-simple regex:

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

The left side of the alternation | matches complete <span... /span> tags. We will ignore these matches. The right side matches and captures apples to Group 1, and we know they are the right ones because they were not matched by the expression on the left.

This program shows how to use the regex (see the results in the right pane of the online demo). Please note that in the demo I replaced with [span] instead of <span> so that the result would show in the browser (which interprets the 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);

Reference

• How to match (or replace) a pattern except in situations s1, s2, s3...
• Article about matching a pattern unless...

这篇关于不在span标签内匹配文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！