获取字符串里img里的src地址方法

在做前端页面的时候要调取后台的数据。最近在做商品详情的页面实现，因为是商品详情的数据是通过后台的文本编辑器编辑的。所以传过来的数据是带html标签的代码。

现在的需求是从这一段数据里面取到img，然后再取img里面的src数据。

通过正则表达式实现，代码如下
html代码

<body>
     <img src="baidu.com" alt="">
     <img src="baidu.com" alt="">
     <img src="baidu.com" alt="">
     <img src="baidu.com" alt="">
     <img src="baidu.com" alt="">
     <img src="baidu.com" alt="">
     <img src="" alt="">
     <img src="" alt="">
</body>

js代码

/*获取字符串img里的src方法*/
function GetStrImgUrl(str) {
     var a = str;
     var arrimg = [];
      a.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
           arrimg.push(capture);
       });
     if (arrimg !=null && arrimg.length >0) {
        return arrimg;
      }
}
var ImgUrlArr = [];//声明一个图片地址的数组
var Data=document.body.innerHTML;
var result = GetStrImgUrl(Data);//传入需要取得资源的字符串
for(var i=0; i<result .length;i++){
   if(typeof result [i] != underfined){
      ImgUrlArr.push(result [i]) //如果图片地址不为undefined,把图片地址push到图片数组里
  }
}

以上方法可以取得到img图片的src地址。有个问题就是body里面如果没有img图片会返回underfined，所以我们在这里加入判断，如果是等于underfined，则不会取img的src地址。以上代码亲测有效。

最后编辑于：2019.11.01 09:25:05

获取字符串里img里的src地址方法

推荐阅读更多精彩内容