js使用正则表达式将字符串里面的img标签src的值提取出来

我看很多做前端的朋友，基本上都会碰到这个问题。比如，前端页面上要动态显示从后台接口返回的一串包含【DOM】节点的字符串。但是呢？有时候后台返回的这段字符串里面有个标签，而页面上图片因为地址原因又显示不出来，所以有时候就会有这么个需求，需要匹配到这段字符串里面的【img】标签，拿到它的【src】属性，可能会做判断可能会直接修改。

let reg = /(\/|http)[^>]+\.(jpg|jpeg|png|gif)/g;

这个正则的适用以下场景，如下：

一、带返回http或者https开头的链接。()；

二、直接返回服务器图片存储路径。();

let str = ' 

甜粄是一道美味可口的传统小吃，属于客家菜。主要食材有糯米、砂糖等制成。'

str.match(reg)

第二种，就是利用我们JS的DOM节点操作去获取。

比如后台返回的是这样的一串字符串；

let str = ' 

甜粄是一道美味可口的传统小吃，属于客家菜。主要食材有糯米、砂糖等制成。'

我们可以先创建一个临时节点;

let tempDom = document.createElement('div');

然后将创建的节点填充;

tempDom.innerHTML = tempDom;

然后获得创建的临时节点下面所有的img标签；

let imgs = tempDom.querySelectorAll('img');

再利用数组的方法去遍历；

[].map.call(imgs,function(img){console.log(img.src)});

这样就可以拿到了img的值，并且可以去修改；

同样的取一下 tempDom.innerHTML的值就好了。