js通过正则直接获取img src的方法

1、了解正则表达式的语法，下面给出几种我们需要用到的表达式的简介。具体更多的语法，请百度搜索正则表达式语法。

\s    匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

?    匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。

|    指明两项之间的一个选择。要匹配 |，请使用 \|。

.     匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 \. 。

g   全文搜索

i    忽略大小写

2、通过正则表达式匹配出所有图片img标签，因所有的html标签都是尖括号开始，尖括号结束，所以我们要编写img的正则表达式。即：<img\b.*?(?:\>|\/>)。首先 标签的开始是 <  ，后紧跟着 img，故使用   /<img\b 进行匹配

.*?  则对字符串进行最小匹配（下一个匹配(?:\>|\/>)出现时，.* 就失效）

img 标签结尾 使用 > 或者 /> ，使用 (?:\>|\/>) 进行匹配

注：圆括号（）会有一个副作用，是相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。同时编写js代码，来实现匹配所有的img标签。

var str = "this is test string <img src=\"/test/test.jpg\

//匹配图片（g表示匹配所有结果i表示区分大小写）

 

var imgReg = /<img.*?(?:>|\/>)/gi;

 

console.log(str.match(imgReg));

3、通过上述的正则表达式匹配后，会获取一个img的集合，这时，我们遍历集合中的每一个img标签，通过正则表达式来获取到src属性。匹配src的正则表达式为：/\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i

\bsrc \b 是把src当成一个单词进行匹配

\s*=  \s* 则是匹配 = 前后是否有空格（* 为0个以上）

[\'\"]?  进行最小匹配，src 一般用单引号或双引号包裹

([^\'\"]*)  匹配不上单引号和双引号的字符

注：这里没有使用 g 进行全局匹配，是因为 img 标签只有一个 src ，匹配到就可以结束了

4、编写js代码，使用上述正则表达式来完成src的匹配，具体代码如下：

//匹配src属性

 

var srcReg =  /xxx=[\'\"]?([^\'\"]*)[\'\"]?/i;//  /xxx=/src，因内容不允许，请自行替换

for (var i=0;i<arr.length;i++)

 

{

 

   var src = arr[i].match(srcReg);

 

   //获取图片地址

 

   if(src[1]){

 

       console.log('已匹配的图片地址'+(i+1)+'：'+src[1]);

 

   }

 

}

1、使用正则表达式：   /<img\b.*?(?:\>|\/>)/gi 进行全文匹配，获取所有的 img 标签

2、使用正则表达式：   /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i   对每一个 img 标签进行循环匹配，获取img对应的 src 属性。