js利用正则替换图片路径问题

最新推荐文章于 2023-05-30 20:59:41 发布

转载最新推荐文章于 2023-05-30 20:59:41 发布 · 710 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luxiaoyao/p/8903611.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的简单方法，用于批量修改HTML文件中所有图片的src路径，将其统一替换为指定前缀加上原有路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
    * 需求：给图片的src地址前面增加为assets
    *
    * 1. 将需要匹配的内容原封不动的写入正则表达式
    * 2. 将改变的内容替换为.*?
    * 3. 将.*?添加(),目的是为了能够将src中的内容单独匹配一次作为匹配结果
    * 4.通过replace将内容替换
    *   content.replace(reg,'<img src="assets/$1" alt="">')
    * */
<body>
    <ul>
        <li class="images"><a href="1.html"><img class="a" src="images/1.jpg" alt="134534"></a></li>
        <li><a href="2.html"><img src="images/2.jpg" alt="asdfas2"></a></li>
        <li><a href="3.htlm"><img src="images/3.jpg" class="b" alt="3asdf"></a></li>
        <li><a href="4.html"><img src="images/4.jpg" alt="45asdf4"></a></li>
        <li><a href="5.html"><img src="images/5.jpg" alt="zxcv5" title="abc"></a></li>
    </ul>
</body>

<script>
    //1。获取ul对象
    var ul = document.querySelector('ul');
    // 2.获取ul的文本内容,此时就是获取出来ul里所有的内容
    var content = ul.innerHTML;
    // 3.写正则表达式，先把需要改变的地址原封不动拿过来
    // <img src="images/3.jpg" class="b" alt="3asdf">把不一样地方用(.*?)替换，如下
    // .匹配的是非空字符*匹配任意数量?拒绝贪婪，匹配任意数量的非空字符，如果不加?，就会匹配到最后
    var reg = /<img(.*?)src="(.*?)"(.*?)>/g;
    var result = content.replace(reg,'<img$1src="assets/$2"$3>')
    console.log(result);
</script>

转载于:https://www.cnblogs.com/luxiaoyao/p/8903611.html