javascript 正则表达式匹配没有内部文本的开始和结束跨度标签

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8880760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 04:51:49  来源:igfitidea点击:

REGEX to match starting and ending span tags without their inner text

javascriptregexmootools

提问by user253530

I am using the following RegEx to do a replacement in a string:

我正在使用以下 RegEx 在字符串中进行替换:

<\/?(span)\b(?:\s+class="highlight")?>

But this regex has a flaw... Take this sample code for example:

但是这个正则表达式有一个缺陷......以这个示例代码为例:

<p>
   Some text here
   <span class="highlight">This is highlighted</span>
   <span>This is not highlighted</span>
</p>

My regex will match both of the span tags although i only want the one with the class="highlight" set. How can I achieve this using RegEx?

我的正则表达式将匹配两个 span 标签,尽管我只想要一个带有 class="highlight" 集的标签。如何使用 RegEx 实现这一目标?

PS: please do not tell me that I should not use RegEx for this because i will downgrade your answer as it is off-topic. This is a question for the RegEx guys.

PS:请不要告诉我我不应该为此使用 RegEx,因为我会降级您的答案,因为它是题外话。这是 RegEx 人员的问题。

EDIT: based on the accepted answer below i am using the following regex to do a replace NOTE: code is in javascript (mootools)

编辑:基于下面接受的答案,我使用以下正则表达式进行替换注意:代码在 javascript (mootools) 中

var regex = new RegExp("(<span[^>]+class\s*=\s*(\"|')highlight\2[^>]*>)(.*?)(</span>)",'g');
var replaced = element.get('html').replace(regex, "");
element.set('html', replaced);

The above regex will replace a some text here with "some text here" (without the double quotes)

上面的正则表达式将这里的一些文本替换为“这里的一些文本”(没有双引号)

回答by Aram Kocharyan

This should give the most flexibility.

这应该提供最大的灵活性。

(<span[^>]+class\s*=\s*("|')highlight[^>]*>)[^<]*(</span>)

UPDATE:

更新:

The captured groups you need for the opening and closing tags are \1 and \3.

开始和结束标记所需的捕获组是 \1 和 \3。

回答by Tomalak

Just to show you that an alternative solution is not only possible bot also betterthan using regex:

只是为了向您展示替代解决方案不仅可能机器人也比使用正则表达式更好

$$('span.highlight').each(function (node, idx, Elem) {
    var txt = document.createTextNode(Elem.get('text'));
    node.parentNode.replaceChild(txt, node)
});

See this fiddle: http://jsfiddle.net/Tomalak/umgZp/

看到这个小提琴:http: //jsfiddle.net/Tomalak/umgZp/

(And this is just off the top of my hat, I've had zero exposure to MooTools so far. There might be more elegant ways than this.)

(这只是我的想法,到目前为止,我对 MooTools 的接触为零。可能有比这更优雅的方法。)

回答by Milad Naseri

You are obviously stating that that class=highlightpart is optional, by placing a ?in front of the group capturing it.

class=highlight通过?在捕获它的组前面放置一个,您显然表明该部分是可选的。

This should do it for you:

这应该为你做:

var regex = /(?:<span\s+[^>]*?\s*class\s*=\s*('|")(?:\S+\s+)?highlight(?:\s+\S+)?[^>]*>|<\/span>/;

This will also include SPAN tags with class attributes like a b c highlight e f g.

这还将包括具有类属性的 SPAN 标记,例如a b c highlight e f g.

Also, if you want to capture a SPAN tag with its matchingending, you can use this, and access groups 1 and 3 respectively for the opening and ending tags:

此外,如果您想捕获具有匹配结尾的 SPAN 标签,您可以使用它,并分别访问组 1 和 3 的开始和结束标签:

var regex = /(<span\s+[^>]*?\s*class\s*=\s*('|")(?:\S+\s+)?highlight(?:\s+\S+)?[^>]*>).*?(<\/span>)/;