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

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这种单一标签的字符串，或是肯定不会有嵌套的标签字符串。