js通过正则匹配没有内容的空标签
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="sf-static.b0.upaiyun/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 = place(ptn,'')
console.log(s)
通过在线测试⼯具
如果考虑将没有style的span去掉
有span的就留下来
因为默认编辑器中，span没有样式的没有必要
place(/<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 place(/<p><br type="_moz">\s*?<\/p>/ig,"");
place(/<p>\s*<br type="_moz">\s*<\/p>/ig, "");
place(/<p>\s*?<br\s?\/?>\s*?<\/p>/ig, "");
place(/<p>(\s|\ \;| |　| c2 a0)*<\/p>/ig, "");
place(/<p>\s*?<\/p>/ig,"");
place(/<p> <\/p>/ig,"");
place(/<br type="_moz">\n <\/p>/ig, "</p>");
place(/<br type="_moz">\s*?<\/p>/ig, "</p>");
place(/<br\s?\/?>\s*?<\/p>/ig, "</p>");
place(/<br \/>\n <\/p>/ig, "</p>");
place(/<br>\n <\/p>/ig, "</p>");
//多个br
place(/(<br type="_moz">\s*)+<\/p>/ig, "</p>");
place(/(<br\s?\/?>\s*)+<\/p>/ig, "</p>");
//空标签
place(/<p style=["'].[^<>]*["']>/ig, "<p>");
place(/<span >/ig, "<span>");
//没有style的span去掉
place(/<span\s*?(?!:style)>(.[^<>]*)<\/span>/ig,"$1");
place(/<([a-z]+?)(?:\s+?[^>]*)?>(\s| )*?<\/\1>/ig, "");
//place(/<([a-z]+?)(?:\s+?[^>]*)?>\s*?<\/\1>/ig, "");
return str;
}
上⾯都是⼀些好东西，具体的⾃⼰研究吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。