将 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 代码中使用它，例如

<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 还是只获取第二部分。 从屏幕截图的右下角可以明显看出这一点：

现在为了记录这两部分，我们可以使用这个不错的片段：

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-+&@#\\/%?=~_|!:,.;]*)

得到相同的输出

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

  (?: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使第二种情况与您的原始正则表达式一起使用