将 HTML 代码中的链接模式与 RegEx 匹配

Question

我正在使用一个 linkify 函数，它使用正则表达式检测类似链接的模式，并用 a-tags 替换这些模式以显示可点击的链接。

正则表达式如下所示：

    // http://, https://, ftp:// 
    var urlPattern = /\b(?![^<]*>|[^<>]*<\/)(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;
    /* Some explanations:
    (?!     # Negative lookahead start (will cause match to fail if contents match)
    [^<]*   # Any number of non-'<' characters
    >       # A > character
    |       # Or
    [^<>]*  # Any number of non-'<' and non-'>' characters
    </      # The characters < and /
     )      # End negative lookahead.
    */
    

并像这样替换链接：

 return textInput.replace(urlPattern, '<a target="_blank" rel="noopener" href="$&">$&</a>')

正则表达式非常适用于文本链接。但是，我也在 HTML-Code 中使用它，例如

<ul><li>Link: https://www.link.com</li></ul> //linkify not working
<ul><li>Link: https://www.link.com <br/></li></ul> //linkify working

只有第二个例子起作用了。我不知道为什么行为会有所不同，很高兴能从你那里得到一些帮助。我的正则表达式应该是什么样子才能在不中断列表元素的情况下进行链接？

Answer 1

喏，

如果我正确理解了您的问题，我认为这个正则表达式应该可以检测两种场景中的链接：

\b(?![^<]*>)(?:https?|ftp):\/\/([a-z0-9-+&@#\/%?=~_|!:,.;]*)

基本上我们以这种方式分割第一部分：

然后我们去抓取感兴趣的不同部分：第一部分是一个非捕获组，如您的原始表达式中那样，以便稍后剥离协议，如果真的不需要的话。最后一部分取 URL 的剩余部分

对于我们创建正则表达式的方式，我们现在可以决定是采用整个 URL 还是仅采用第二部分。从屏幕截图的右下角可以明显看出这一点：

现在为了记录这两部分我们可以采取this nice snippet:

const str = '<ul><li>Link: https://www.link.com</li></ul>';
var myRegexp = /\b(?![^<]*>)(?:https?|ftp):\/\/([a-z0-9-+&@#\/%?=~_|!:,.;]*)/gim;
var match = myRegexp.exec(str);
console.log(match[0]);
console.log(match[1]); 

可能的变化：

• 在上述情况下，您可以将正则表达式进一步简化为：

  (?:https?|ftp):\/\/([a-z0-9-+&@#\/%?=~_|!:,.;]*)

获得相同的输出

• 如果完整的网址足够你可以删除第二组的圆括号

  (?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*

祝你有美好的一天，
安东尼诺

PS - 我假设您的示例是：

<ul><li>Link: https://www.link.com</li></ul>
<ul><li>Link: https://www.link.com <br/></li></ul>

即使用https、http 或ftp，这使得第二种情况与您的原始正则表达式一起工作