如何用正则表达式选中两个完整span标签并忽略中间文本？

嘿，我来帮你解决这个正则匹配的问题！

你之前用的^(\<span(.*)\<\/span\>)$之所以会选中全部文本，问题出在两个地方：一是^和$限定了要匹配整行内容，二是.*是贪婪匹配模式，会尽可能多地抓取字符，从第一个<span一直到最后一个</span>，自然就把中间的Lorem Ipsum也包含进去了。

要精准匹配那两个独立的<span>标签，忽略中间的文本，你可以用这个正则：

<span[^>]*>.*?</span>

我给你拆解一下这个正则的逻辑：

• <span[^>]*>：匹配<span>的起始标签，[^>]*会匹配所有标签内的属性（比如class="exclass"或者title="This is an example"），而且不会误匹配到其他标签的>
• .*?：这里用了非贪婪匹配（问号就是非贪婪的标志），会只抓取到第一个</span>前的内容，刚好对应每个<span>标签里的文本（也就是1.和*）
• </span>：匹配闭合标签

记得要开启全局匹配修饰符g，这样就能一次性匹配到所有符合条件的<span>标签，而不是只匹配第一个。

举个实际使用的例子（比如JavaScript环境）：

const htmlStr = '<span class="exclass">1.</span> Lorem Ipsum <span class="exclass2" title="This is an example">*</span>';
const spanRegex = /<span[^>]*>.*?<\/span>/g;
const matchedSpans = htmlStr.match(spanRegex);
// 结果会是：["<span class=\"exclass\">1.</span>", "<span class=\"exclass2\" title=\"This is an example\">*</span>"]

小提醒：如果之后你的HTML结构变得复杂（比如出现嵌套标签），正则就不是最佳方案了，这时候用DOM解析（比如浏览器的document.querySelectorAll('span')）会更靠谱，但针对你现在的场景，这个正则完全够用~

内容的提问来源于stack exchange，提问作者kennsorr