图片相关正则处理

批量修改 htmlcontent 图片地址，增加 assets/

// 写正则表达式，先把需要改变的地址原封不动拿过来 
// <img src="images/3.jpg" class="b" alt="3asdf">把不一样地方用(.*?)替换，如下 
// .匹配的是非空字符*匹配任意数量?拒绝贪婪，匹配任意数量的非空字符，如果不加?，就会匹配到最后
let content='<img src="images/1.jpg" class="a" alt="aaa"/><img src="images/2.jpg" class="b" alt="bbb"/>';

let imgReg = /<img(.*?)src="(.*?)"(.*?)>/g; 
let result = content1.replace(imgReg,'<img$1src="assets/$2"$3>') 
console.log(result);
复制代码

结果如图 - 图片地址已批量加了 assets/：

正则表达式去除地址不符合条件的 img 标签

剔除掉图片地址不以assets/开头的图片

let content='<img class="image-wrap" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/857b1d01c4bb4f26abfab622de3431e0~tplv-k3u1fbpfcp-watermark.image?"/><img class="image-wrap" src="assets/aaaaa/bbbbb/ccccc.png"/>';
 
let imgReg = /<img.*?(?:>|\/>)/gi; //定义正则表达式（拿到img标签所有值）
let imgArray = content.match(imgReg);  //使用正则表达式，拿到的是数组
console.log(imgArray)
let result='';
if (imgArray != null && imgArray != undefined) {
        for (imgstr of imgArray) {
            if(imgstr.indexOf('src="assets/')<0){
                result = content.replace(imgstr, "") //放在循环中剔除img标签
            }
        }
}
console.log(result);
复制代码

结果如图：