js正则表达式匹配img标签,p标签,div标签和其他自定义标签的解决方案
作为前端开发,肯定会有处理字符串的时候,如果只是替换,删除,截取固定的字符串,那么问题不是很大。
但是如果字符串不是固定的呢?例如处理富文本字符串里的Img标签,p标签,div标签等,用普通的indexOf,substr方法可能不太好用。
此时用正则表达式可能比较好使:
匹配p标签:
let reg = /<p(?:(?!<\/p>).|\n)*?<\/p>/gm
匹配img标签
let reg = /<img(?:(?!\/>).|\n)*?\/>/gm
匹配自定义标签
let reg = /<自定义(?:(?!<\/自定义>).|\n)*?<\/自定义>/gm
其实可以看出主要分为两类正则:
一是匹配<标签/>
二是匹配<标签></标签>
因为是固定写法,所以可以通过eval()动态拼写正则,匹配你的字符串。
如下:
let tagAry = ['a','div','p','h2'];
let str = '<div>31212<p>123</p></div><p>h31223<div>rtrttt</div></p>';
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 = /<div(?:(?!<\/div>).|\n)*?<\/div>/gm
如果字符串是:
let str = '<div>1
<div>2
<div>3</div>
</div>
</div>';
这样匹配出来的就会有问题
匹配出来的结果是:
<div>1<div>2</div>
这种写法对于有嵌套的字符串标签是有问题的。
不过一般除了 div标签会有这种嵌套,谁也不会在p标签里再写个p标签;
但是说回来,万事都没绝对的。
一般情况还是建议处理 img这种单一标签的字符串,或是肯定不会有嵌套的标签字符串。