JavascriptRegex提取SrcSet屬性字串中的Url和維度

這個問題的目標是從srcsethtml 屬性字串中提取 URL 和維度。具體這里的引數如下：

• 網址以httpor開頭https
• 網址可能包含 ,
• 網址不能包含空格
• 維度包含后跟x或的數字w。不過，可能甚至不需要遵循其中任何一個。

因此，所需的匹配方法是找到 http/https 并匹配到一個空格，然后匹配數字后緊跟一個wor x，然后是一個逗號。后面的空格表示比賽結束。

這通常看起來像https://url.com 650worhttps://url.com 650或https://url.com 650x。這里沒有嚴格的標準。

這是我嘗試使用Regex101 演示的正則運算式。這里的問題是它沒有正確分組：

(https?:\/\/(?:.*(?:\s \d [wx])(?:,\s*)?) )

要決議的示例字串：

http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 640w, http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 750w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 828, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1080x, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1200w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1920w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 2048w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w,https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=100&q=60 100w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=200&q=60 200w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=300&q=60 300w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=400&q=60 400w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60 500w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=600&q=60 600w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=700&q=60 700w

這樣做的結果應該是：

http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 640w
http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 750w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 828
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1080x
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1200w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1920w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 2048w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=100&q=60 100w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=200&q=60 200w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=300&q=60 300w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=400&q=60 400w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60 500w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=600&q=60 600w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=700&q=60 700w

uj5u.com熱心網友回復：

對于問題中的 4 點，并獲得示例字串的結果，您可以使用：

https?:\/\/\S* \d [xw]?(?=,|$)

模式匹配：

• https?:\/\/ 匹配 http 和 https 的協議
• \S* 匹配可選的非空白字符（可以包含逗號），然后是空格
• \d [xw]?匹配 1 位和可選的x或w
• (?=,|$)正向前瞻，在右側斷言 a,或字串的結尾

正則運算式演示

標籤：

上一篇：如何在正則運算式中檢測阿拉伯語單詞的單詞邊界-Python

下一篇：挑戰正則運算式不適用于菜鳥