我正在获取带有一堆图像 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]
}
}
最佳答案
我猜你可能想设计一个类似于以下内容的表达式:
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}`);
});
}
关于javascript - REGEX 无法读取 null 的属性 '0' 但它适用于 console.log(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57504976/