js通过正则匹配没有内容的空标签

2020-02-22 09:59:03于海丽

js 如何正则匹配没有内容的空标签并移除掉?

例如

<span></span>

<p></p>

等等

正则

/<([a-z]+?)(?:s+?[^>]*?)?>s*?</1>/ig

html='<div id="fixedTools" class="hidden-xs hidden-sm">'+
'n  <a id="backtop" class="hidden border-bottom" href="#" rel="external nofollow" ></a>'+
'n'+
'n  <div class="qrcodeWraper">'+
'n    <a href="/app#qrcode" rel="external nofollow" ><span class="glyphicon glyphicon-qrcode"></span></a>'+
'n    <img id="qrcode" class="border" alt="sf-wechat" src="https://sf-static.b0.upaiyun.com/v-581fe7b0/page/img/app/appQrcode.png">'+
'n'+
'n    <p class="qrcode-text"></p>'+
'n  </div>'+
'n</div>'

ptn=/<([a-z]+?)(?:s+?[^>]*?)?>s*?</1>/ig
s = html.replace(ptn,'')
console.log(s)

通过在线测试工具

如果考虑将没有style的span去掉

有span的就留下来

因为默认编辑器中,span没有样式的没有必要

str=str.replace(/<spans*?(?!:style)>(.[^<>]*)</span>/ig,"$1");

先看下面的位置

零宽断言
接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西,也就是说它们像b,^,$那样用于指定一个位置,这个位置应该满足一定的条件(即断言),因此它们也被称为零宽断言。最好还是拿例子来说明吧:

断言用来声明一个应该为真的事实。正则表达式中只有当断言为真时才会继续进行匹配。

(?=exp)也叫零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp。比如bw+(?=ingb),匹配以ing结尾的单词的前面部分(除了ing以外的部分),如查找I'm singing while you're dancing.时,它会匹配sing和danc。

(?<=exp)也叫零宽度正回顾后发断言,它断言自身出现的位置的前面能匹配表达式exp。比如(?<=bre)w+b会匹配以re开头的单词的后半部分(除了re以外的部分),例如在查找reading a book时,它匹配ading。

假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了),你可以这样查找需要在前面和里面添加逗号的部分:((?<=d)d{3})+b,用它对1234567890进行查找时结果是234567890。

下面这个例子同时使用了这两种断言:(?<=s)d+(?=s)匹配以空白符间隔的数字(再次强调,不包括这些空白符)。

负向零宽断言
前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现,但并不想去匹配它时怎么办?例如,如果我们想查找这样的单词--它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样: