最近有一个需求，匹配字符串里面的背景图片，并放到一个数组里面。
第一个想到的就是正则的子表达式
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
注意⚠️：在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，
也不声明每个匹配子串的位置。如果您需要这些全局检索的信息，可以使用
exec() 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
exec() 方法的功能非常强大，它是一个通用的方法，而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。
除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。
当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
注意⚠️：当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。
所以还是要仔细的看文档。
getImgSrc = (str)=>{
var exec3 = /url\((.*?)\)+/g;
var i = '' ;
var arr = [];
while(i !== null){
var i = exec3.exec(str)
i!==null && arr.push(i[1])
}
return arr
}
getImgSrc(".ssd-module-wrap .M15433045377941{height:789px; background-size:100% 100%; width:750px; background-color:#e9e9e9; background-image:url(//img30.360buyimg.com/sku/jfs/t26641/137/2291210125/205458/d568ad6b/5bfcf56dNf78c1e6b.jpg)}↵.ssd-module-wrap .M15433045697832{height:846px; background-size:100% 100%; width:750px; background-color:#d7d7d7; background-image:url(//img30.360buyimg.com/sku/jfs/t29149/65/750523973/162340/a6767867/5bfcf56dN512cf3bb.jpg)}↵.ssd-module-wrap .M15433045832683{height:567px; background-size:100% 100%; width:750px; background-color:#f2f2f2; background-image:url(//img30.360buyimg.com/sku/jfs/t29695/241/755921147/296506/9be99d1d/5bfcf56dN1027b77e.jpg)}↵")
网友评论