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


    /*
        * 需求:给图片的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>
    
  • 相关阅读:
    简单工厂模式、工厂模式、抽象工厂模式
    直接插入排序
    简单选择排序的陷阱
    面试3 题目二,不修改数组找到重复的数字
    二进制中1的个数(读不懂题目怎么办)
    用两个栈实现队列
    斐波那契数列
    替换空格
    python 实现杨辉三角(依旧遗留问题)
    递归实现二分查找
  • 原文地址:https://www.cnblogs.com/luxiaoyao/p/8903611.html
Copyright © 2020-2023  润新知