1、了解正则表达式的语法，下面给出几种我们需要用到的表达式的简介。具体更多的语法，请百度搜索正则表达式语法。\s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。? 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。| 指明两项之间的一个选择。要匹配 |，请使用 \|。. 匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 \. 。g 全文搜索i 忽略大小写
2、通过正则表达式匹配出所有图片img标签，因所有的htm盟敢势袂l标签都是尖括号开始，尖括号结束，所以我们要编写img的正则表达式。即：<img\b.*?(?:\>|\/>)。首先 标签的开始是 < ，后紧跟着 img，故使用 /<img\b进行匹配.*? 则对字符串进行最小匹配（下一个匹配(?:\>|\/>)出现时，.*就失效）img 标签结尾 使用 > 或者 /> ，使用(?:\>|\/>)进行匹配注：圆括号（）会有一个副作用，是相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。同时编写js代码，来实现匹配所有的img标签。var str = "this is test string <img src=\"/test/test.jpg\" width='50' >hello word! <img src=\"汉字也能匹配.jpg\" /> 33! <img src=\"/uploads/201910251435633.png\" alt=\"\" />"//匹配图片（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]); }}
