如何使用以下字符串中的正則表達式獲取網址

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以獲得信息是更安全的。 這樣比較安全，因為regex與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> 

Answer 3

 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));