javascript - REGEX 无法读取 null 的属性 '0' 但它适用于 console.log()

Question

我正在获取带有一堆图像 URL 的 srcset，我试图只获取第一个 URL。

我认为使用 REGEX 并获取匹配“https://(之间的所有内容).jpg”的字符串是个好主意，所以我编写了以下代码:

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

当我 console.log 末尾为零时 .match(/https:(.*?).jpg/)[0] 我收到错误 property '0 ' 为空。但是当我在没有 [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。 ' 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 '

我认为正则表达式完全可以工作，但我不能仅仅因为 [0] 而得到它

解决方案:我没有 REGEX 的 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]
   }

}

Answer 1

我猜你可能想设计一个类似于以下内容的表达式:

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

虽然不确定。

const regex = /https?:\/\/[\w._-]*\/(?:[\w._-]*\/[\w._-]*)*\.jpe?g/gm;
const 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",
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]`;
let m;

while ((m = regex.exec(str)) !== null) {
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}