如何使用以下字符串的正則表達式來獲取url

Question

給定以下字符串，我可以使用什麼正則表達式來僅提取URL（我不需要引號）？

<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281438586869.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439101401.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439283119.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439479213.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440090151.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440244369.jpg\" /> \r\n</p> 

Answer 1

什麼你要找的是/(\/.*?\.\w{3})/g：

var string = '<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281438586869.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439101401.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439283119.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439479213.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440090151.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440244369.jpg\" /> \r\n</p>'; 
 

 
console.log(string.match(/(\/.*?\.\w{3})/g));

打破下來：

• \/匹配的斜線，用反斜槓它
個
• .*匹配0或多個字符不屬於換行符
• \.的點相匹配，以反斜槓逸出它
• \w{3}比賽正好三個「字」的字符（字母數字或下劃線）
• 的g標誌指示該正則表達式應該匹配所有出現

.match返回的陣列，並喲ü可以簡單的通過指定索引，或者通過迭代循環提取各個串（不帶引號）：

var string = '<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281438586869.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439101401.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439283119.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439479213.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440090151.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440244369.jpg\" /> \r\n</p>'; 
 

 
var matches = string.match(/(\/.*?\.\w{3})/g); 
 
for (var i = 0; i < matches.length; i++) { 
 
    console.log(matches[i]); 
 
}

希望這有助於！ :)

Answer 2

使用HTML創建DocumentFragment更安全，然後查詢臨時DOM以獲取信息。這是更安全的，因爲正則表達式可能非常脆弱與DOM。例如，如果您在HTML中擁有的URL可能有或沒有協議，例如https，ftp等，會發生什麼情況。

我正在使用小型庫將HTML轉換爲DocumentFragemnt。但是你可以用很多方式來做到這一點。

let html = `<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281438586869.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439101401.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439283119.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281439479213.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440090151.jpg\" /> \r\n</p>\r\n<p>\r\n\t<img alt=\"\" src=\"/upload/201704/28/201704281440244369.jpg\" /> \r\n</p>`; 
 

 
let fragment = HtmlFragment(html); 
 
let urls = Array 
 
    .from(fragment.querySelectorAll('img[src]')) 
 
    .map(img => img.getAttribute('src')); 
 

 
console.log(urls);

<script src="https://unpkg.com/html-fragment@1.1.0/lib/html-fragment.min.js"></script>