js获取img的src属性的方法很多，这里为小伙伴介绍一种通过正则表达式来获取的方法。
工具/原料
IntelliJIDEA
方法/步骤
1、了解正则表达式的语法，下面给出几种我们需要用到的表达式的简介。具体更多的语法，请百度搜索正则表达式语法。\s匹配任何空白字符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。?匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配?字符，请使用\?。|指明两项之间的一个选择。要匹配|，请使用\|。.匹配除换行符\n之外的任何单字符。要匹配.，请使用\.。g全文搜索i忽略大小写
2、通过正则表达式匹配出所有图片img标签，因所有的htm盟敢势袂l标签都是尖括号开始，尖括号结束，所以我们要编写img的正则表达式。惚肋醚汊即：<img\b.*?(?:\>|\/>)。首先标签的开始是<，后紧跟着img，故使用/<img\b进行匹配.*?则对字符串进行最小匹配（下一个匹配(?:\>|\/>)出现时，.*就失效）img标签结尾使用>或者/>，使用(?:\>|\/>)进行匹配注：圆括号（）会有一个副作用，是相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。同时编写js代码，来实现匹配所有的img标签。varstr="thisisteststring<imgsrc=\"/test/test.jpg\"width='50'>helloword!<imgsrc=\"汉字也能匹配.jpg\"/>33!<imgsrc=\"/uploads/201910251435633.png\"alt=\"\"/>"//匹配图片（g表示匹配所有结果i表示区分大小写）varimgReg=/<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属性varsrcReg=/xxx=[\'\"]?([^\'\"]*)[\'\"]?/i;///xxx=/src，因内容不允许，请自行替换for(vari=0;i<arr.length;i++){varsrc=arr[i].match(srcReg);//获取图片地址if(src[1]){console.log('已匹配的图片地址'+(i+1)+'：'+src[1]);}}
