js正则表达式匹配img标签,p标签,div标签和其他自定义标签的解决方案

js正则表达式匹配img标签,p标签,div标签和其他自定义标签的解决方案

作为前端开发,肯定会有处理字符串的时候,如果只是替换,删除,截取固定的字符串,那么问题不是很大。
但是如果字符串不是固定的呢?例如处理富文本字符串里的Img标签,p标签,div标签等,用普通的indexOf,substr方法可能不太好用。
此时用正则表达式可能比较好使:

匹配p标签:

let reg = /).|\n)*?<\/p>/gm

匹配img标签

let reg = /).|\n)*?\/>/gm

匹配自定义标签

let reg = /<自定义(?:(?!<\/自定义>).|\n)*?<\/自定义>/gm

其实可以看出主要分为两类正则:

一是匹配<标签/>

二是匹配<标签>

因为是固定写法,所以可以通过eval()动态拼写正则,匹配你的字符串。
如下:

let tagAry = ['a','div','p','h2'];
let str = '
31212

123

h31223

rtrttt

'
; for(let i=0;i<tagAry.length;i++){ let reg = new RegExp(`<${tagAry[i]}(?:(?!<\/${tagAry[i]}>).|\n)*?<\/${tagAry[i]}>`,'gm'); str.replace(reg,(str)=>{ console.log(str,'str') }) }

但是还是会有一个问题:
就以div标签为例:
正则如下:

let reg = /).|\n)*?<\/div>/gm

如果字符串是:

let str = '<div>1
             <div>2
               <div>3</div>
             </div>
           </div>';

这样匹配出来的就会有问题
匹配出来的结果是:

<div>1<div>2</div>

这种写法对于有嵌套的字符串标签是有问题的。
不过一般除了 div标签会有这种嵌套,谁也不会在p标签里再写个p标签;

但是说回来,万事都没绝对的。
一般情况还是建议处理 img这种单一标签的字符串,或是肯定不会有嵌套的标签字符串。

你可能感兴趣的:(正则表达式)