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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM