如何使用以下字符串中的正则表达式获取网址

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