Javascript 正则表达式无法读取属性'；0'；为null，但可与console.log（）一起使用

我正在获取一组带有图像URL的srcset，并且我正在尝试只获取第一个URL

我认为使用正则表达式并获取与“https://（介于.jpg之间的所有内容）”匹配的字符串是个好主意，因此我编写了以下代码：

let imageURL;
if (banner_image) {
imageURL = banner_image.children[0].srcset.match(/https:(.*?).jpg/)[0]
}

当我将console.log与

.match（/https:（.*）.jpg/）[0]

结尾的零一起记录时，我得到了一个null属性

的错误。但是，当我不使用[0]时，我得到一个具有以下属性的数组：

[0: "https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_1920,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg",
1: "//res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_1920,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large",
groups: undefined,
index: 0,
input: "https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_1920,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1920w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_1600,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1600w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_1366,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1366w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_1024,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1024w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_768,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 768w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_640,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 640w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_460,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 460w, https://res.cloudinary.com/doordash/image/fetch/q_auto:eco,f_auto,w_300,c_fill,ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 300w",
length: 0]

我希望输出只是作为字符串的第一个URL。“”

我认为正则表达式是完全有效的，但我不能仅仅因为[0]而得到它

解决方案：
我没有正则表达式的while语句。这是代码

let regex = /https:(.*?).jpg/gm;
let arr;
let imageURL;

if (banner_image) {

   let str = banner_image.children[0].children[0].children[1].srcset
   while ((arr = regex.exec(str)) !== null) {
      imageURL = arr[0]
   }

}

我猜你可能想设计一个类似于：

https?:\/\/[\w._-]*\/(?:[\w._-]*\/[\w._-]*)*\.jpe?g

不过我不确定


const regex=/https？：\/\/[\w.\u-]*\/（？：[\ w.\u-]*\/[\ w.\u-]*）*\.jpe？g/gm；
常量str=`[0:https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_auto，w_1920，c_fill，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg",
1:“//res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_auto，w_1920，c_fill，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large",
组：未定义，
索引：0，
输入："https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_auto，w_1920，c_fill，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1920w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_自动，w_1600，c_填充，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1600w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_auto，w_1366，c_fill，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1366w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_自动，w_1024，c_填充，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 1024w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_自动，w_768，c_填充，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 768w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco、f_auto、w_640、c_fill、ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 640w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_auto，w_460，c_fill，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 460w，https://res.cloudinary.com/doordash/image/fetch/q_auto:eco，f_自动，w_300，c_填充，ar_100:55/https://doordash-static.s3.amazonaws.com/media/photos/58c72a24-9293-40bd-867d-56603d7a686e-retina-large.jpg 300w“，
长度：0]`；
让m；
while（（m=regex.exec（str））！==null）{
if（m.index==regex.lastIndex）{
regex.lastIndex++；
}
m、 forEach（（匹配，组索引）=>{
log（`Found match，group${groupIndex}:${match}`）；
});
}
由于您的正则表达式不包含
g
标志，
String.prototype.match
返回与
Regex.exec
相同的定义。下面是它的定义：

如果匹配失败，exec（）方法将返回null

这意味着
banner\u image.children[0].srcset
在尝试之间发生了更改，并且由于不匹配，正则表达式返回了
null

返回的数组将匹配的文本作为第一个项，然后每个捕获括号对应一个项，匹配的括号包含捕获的文本

这是一个很好的匹配后得到的结果
我认为您需要为
banner\u图像提供一个示例定义