如何在不损害嵌入对象和内联URL的情况下抓取JavaScript中的URL

Question

我编写了一个RegExp来抓取和编码JavaScript中的URL。这工作得很好，但它在我的应用程序中引入了一个bug。我有一个span元素，用于显示如下表情：

<span style="background:url(http://localhost/res/emo/face/E004.png)"></span>

现在，我使用这个正则表达式来抓取任何URL并将其转换为实际的HTML可点击链接：

/((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/ig

这最终将表情符号URL编码成了一个可点击的链接。任何人都可以调整代码以忽略元素或嵌入对象中的URL吗？

求求你我需要帮助！

代码如下：

var urlRegex = /((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/ig;
return txt.replace(urlRegex, function (url) {
  var hyperlink = url;
  if(!hyperlink.match('^https?:\/\/')) {
    hyperlink = 'http://' + hyperlink;
  }

  return `<a href="/?away=${encodeURIComponent(hyperlink)}&ref_component=hyperApp" target="_blank" rel="noopener noreferrer">${url}</a>`;
});

我不认为里面的URLS

<span style="background:url(http://localhost/res/emo/face/E004.png)"></span>

都被触动了。

Answer 1

您需要使用负面后视，这在JavaScript中的支持是有限的。(请参阅此处https://stackoverflow.com/a/50434875/6853740)

简单地向您现有的正则表达式添加负面后视仍然不能像预期的那样工作：

在您的示例中，((?<!url\()(https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)仍然与"E004.png“匹配。甚至这篇文章(What is the best regular expression to check if a string is a valid URL?)中的其他URL也与此匹配。您可能需要考虑只查找以http://或https://开头的链接，这可能有助于您重新生成仅与完整URL匹配的正则表达式。