这篇文章主要介绍了js通过正则匹配没有内容的空标签,需要的朋友可以参考下

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

例如

<span></span>

<p></p>

等等

正则

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

html='<div id="fixedTools">'+
'\n  <a id="backtop" href="#" rel="external nofollow" ></a>'+
'\n'+
'\n  <div>'+
'\n    <a href="/app#qrcode" rel="external nofollow" ><span></span></a>'+
'\n    <img id="qrcode" src="https://sf-static.b0.upaiyun.com/v-581fe7b0/page/img/app/appQrcode.png">'+
'\n'+
'\n    <p></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(/<span\s*?(?!:style)>(.[^<>]*)<\/span>/ig,"$1");

先看下面的位置

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

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

(?=exp)也叫零宽度正预测先行断言,它断言自身出现的位置的后面能匹配表达式exp。比如\b\w+(?=ing\b),匹配以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,我们可以尝试这样:

\b\w*q[^u]\w*\b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐,直接就观察出来了),你会发现,如果q出现在单词的结尾的话,像Iraq,Benq,这个表达式就会出错。这是因为[^u]总要匹配一个字符,所以如果q是单词的最后一个字符的话,后面的[^u]将会匹配q后面的单词分隔符(可能是空格,或者是句号或其它的什么),后面的\w*\b将会匹配下一个单词,于是\b\w*q[^u]\w*\b就能匹配整个Iraq fighting。负向零宽断言能解决这样的问题,因为它只匹配一个位置,并不消费任何字符。现在,我们可以这样来解决这个问题:\b\w*q(?!u)\w*\b。

零宽度负预测先行断言(?!exp),断言此位置的后面不能匹配表达式exp。例如:\d{3}(?!\d)匹配三位数字,而且这三位数字的后面不能是数字;\b((?!abc)\w)+\b匹配不包含连续字符串abc的单词。

同理,我们可以用(?<!exp),零宽度负回顾后发断言来断言此位置的前面不能匹配表达式exp:(?<![a-z])\d{7}匹配前面不是小写字母的七位数字。

一个更复杂的例子:(?<=<(\w+)>).*(?=<\/\1>)匹配不包含属性的简单HTML标签内里的内容。(?<=<(\w+)>)指定了这样的前缀:被尖括号括起来的单词(比如可能是<b>),然后是.*(任意的字符串),最后是一个后缀(?=<\/\1>)。注意后缀里的\/,它用到了前面提过的字符转义;\1则是一个反向引用,引用的正是捕获的第一组,前面的(\w+)匹配的内容,这样如果前缀实际上是<b>的话,后缀就是</b>了。整个表达式匹配的是<b>和</b>之间的内容(再次提醒,不包括前缀和后缀本身)。

这个解读

1、<span后面的/s*? 主要是考虑<span   >与<span>都考虑在内

\s匹配空字符*表示多个空字符都可以,?是表示前面的可有可无。

2、(?!:style) 表示右侧不能有style的才可以匹配,因为有的肯定有用。而且不获取,所以这个括号不是$1

3、(.[^<>]*) 就是匹配<span></span>中间的数据了。

这两天刚开始研究这个,写了好几个正则,先分享出来,看大家能看懂吗

//加强替换主要是考虑多个br的问题
function doRepAdvance(s){
var str=s.replace(/<p><br type="_moz">\s*?<\/p>/ig,"");
str=str.replace(/<p>\s*<br type="_moz">\s*<\/p>/ig, "");
str=str.replace(/<p>\s*?<br\s?\/?>\s*?<\/p>/ig, "");
str=str.replace(/<p>(\s|\ \;| | |\xc2\xa0)*<\/p>/ig, "");
str=str.replace(/<p>\s*?<\/p>/ig,"");
str=str.replace(/<p> <\/p>/ig,"");
str=str.replace(/<br type="_moz">\n <\/p>/ig, "</p>");
str=str.replace(/<br type="_moz">\s*?<\/p>/ig, "</p>");
str=str.replace(/<br\s?\/?>\s*?<\/p>/ig, "</p>");
str=str.replace(/<br \/>\n <\/p>/ig, "</p>");
str=str.replace(/<br>\n <\/p>/ig, "</p>");
//多个br
str=str.replace(/(<br type="_moz">\s*)+<\/p>/ig, "</p>");
str=str.replace(/(<br\s?\/?>\s*)+<\/p>/ig, "</p>");
//空标签
str=str.replace(/<p style=["'].[^<>]*["']>/ig, "<p>");
str=str.replace(/<span>/ig, "<span>");
//没有style的span去掉
str=str.replace(/<span\s*?(?!:style)>(.[^<>]*)<\/span>/ig,"$1");
str=str.replace(/<([a-z]+?)(?:\s+?[^>]*)?>(\s| )*?<\/\1>/ig, "");
//str=str.replace(/<([a-z]+?)(?:\s+?[^>]*)?>\s*?<\/\1>/ig, "");

return str;
}

上面都是一些好东西,具体的自己研究吧。

    无相关信息
最新资讯
Q3净利润下滑60%,华米科技被谁拖累了?

Q3净利润下滑60%,华米

曾站在智能硬件风口最前沿的华米科技,似乎陷入了瓶颈期
没有唐岩的陌陌

没有唐岩的陌陌

虽然陌陌已经持续23个季度盈利,陌陌营收和净利润却双双
百度字节诉讼拉锯折射竞争焦虑 律师称再上诉意义不大

百度字节诉讼拉锯折射

百度与今日头条之间始于2018年的诉讼案件近日终于有了
达达集团增发新股定价50美元 募资用于市场推广及研发等

达达集团增发新股定价

达达集团宣布增发美国存托股票(ADS)完成50美元定价。
拼多多“天天领现金”被投诉提现难 专家:平台如有意设阻或涉欺诈

拼多多“天天领现金”

拼多多的“天天领现金”活动真的能提现吗?
可免费观看电视直播且无需流量 这样的5G手机你会买吗?

可免费观看电视直播且

在700MHz技术与产业应用研讨会上,中国广播电视网络有限
最新文章
正则表达式替换table表格中的样式与空标记(保留rowspan与colspan)

正则表达式替换table

最近几天的劳动成果,用正则表达式去除表格中的样式与cl
js中的正则表达式入门(大量实例代码)

js中的正则表达式入门

正则表达式(regular expression)描述了一种字符串匹配
linux 正则表达式grep实例分析

linux 正则表达式grep

正则表达式(Regular Expression)是用于描述一组字符串特
正则表达式匹配闭合HTML标签(支持嵌套)

正则表达式匹配闭合HT

先确定我们要解决的问题——从一段Html文本中找出特定
linux下关于正则表达式grep的一点总结

linux下关于正则表达

正则表达式(Regular Expression)是用于描述一组字符串特
python 正则表达式语法学习笔记

python 正则表达式语

正则表达式是一个特殊的字符序列,它能帮助你方便的检查