我看很多做前端的朋友，基本上都會碰到這個問題椭微。比如掖疮，前端頁面上要動態(tài)顯示從后臺接口返回的一串包含【DOM】節(jié)點的字符串。但是呢壕吹？有時候后臺返回的這段字符串里面有個<img src="" alt="" />標簽，而頁面上圖片因為地址原因又顯示不出來删铃，所以有時候就會有這么個需求耳贬，需要匹配到這段字符串里面的【img】標簽，拿到它的【src】屬性猎唁，可能會做判斷可能會直接修改咒劲。
let?reg?=?/(\/|http)[^>]+\.(jpg|jpeg|png|gif)/g;
這個正則的適用以下場景，如下：
一诫隅、帶返回http或者https開頭的鏈接腐魂。(<img src="http://www.baidu.com/upload/baidu.jpg" />)；
二逐纬、直接返回服務器圖片存儲路徑蛔屹。(<img src="/upload/downFile/catalogue/baidu.jpg" />);
let str = '<div?style="text-align:?center;"><img?alt=""?src="/rooufiles/gather/A/ADMIN/1585793229899nhWuXs.jpg"?/><br?/> </div><img?alt=""?src="https://www.baidu.com/baidu.jpg"?/>甜粄是一道美味可口的傳統(tǒng)小吃，屬于客家菜豁生。主要食材有糯米兔毒、砂糖等制成。<br?/>'
str.match(reg)
第二種沛硅，就是利用我們JS的DOM節(jié)點操作去獲取眼刃。
比如后臺返回的是這樣的一串字符串；
let str = '<div?style="text-align:?center;"><img?alt=""?src="/rooufiles/gather/A/ADMIN/1585793229899nhWuXs.jpg"?/><br?/> </div><img?alt=""?src="https://www.baidu.com/baidu.jpg"?/>甜粄是一道美味可口的傳統(tǒng)小吃摇肌，屬于客家菜擂红。主要食材有糯米、砂糖等制成围小。<br?/>'
我們可以先創(chuàng)建一個臨時節(jié)點;
let tempDom = document.createElement('div');
然后將創(chuàng)建的節(jié)點填充;
tempDom.innerHTML =?tempDom;
然后獲得創(chuàng)建的臨時節(jié)點下面所有的img標簽昵骤；
let imgs = tempDom.querySelectorAll('img');
再利用數(shù)組的方法去遍歷；
[].map.call(imgs,function(img){console.log(img.src)});
這樣就可以拿到了img的值肯适，并且可以去修改变秦；
同樣的取一下 tempDom.innerHTML的值就好了。?
