通过解析包含url的文本生成HTML锚

Generate HTML anchor by parsing text containing URLs

本文关键字：文本 HTML url 包含      更新时间：2023-09-26

我有一个包含运行文本的段落，其中也可能包含url。该段落将包含描述对象或事物的运行文本，并在两者之间穿插url。url的形式可以是

  1. http://mail.google.com
  2. http://www.google.com
  3. www.google.com

我需要使用JavaScript解析段落并生成HTML内容，确保url呈现为HTML锚。我可以使用以下- 

var httpUrlPattern = /https?:'/'/['w-]+('.['w-]+)+(['w.,@?^=%&:'/'$~+#-]*['w@?^=%&'/~+#-])?
text = text.replace( httpUrlPattern, '<a href="$&" target="_blank">$&</a>' );

对于类型#1和#2的url可以正常工作。但是对于#3，它生成href=/www.google.com

所以我应用了额外的过滤

var wwwUrlPattern = /(www'.)['w-]+('.['w-]+)+(['w.,@?^=%&amp;:'/'$~+#-]*['w@?^=%&amp;'/~+#-])?;
text = text.replace( wwwUrlPattern, '<a href="http://$&" target="_blank">$&</a>' );

这修复了#3)，但破坏了#2)。

有什么建议我如何修复所有的场景吗?

缺乏构建URL的标准，这使得它很难实现。我假设您不想捕获没有www或mail前缀的url，如stackoverflow.com。这使得匹配非常不确定。它可以是这样的:

/'b['w.,@?^=%&:/$~+#-]+'.'w'w+'b/

但是有很大的错误匹配的风险

为了使其更具体，您可以使http 或 www/mail部分(或/和任何其他给定的前缀集)是强制性的:

/'b((?:https?:'/'/|www'.|mail'.)['w.,@?^=%&:/$~+#-]+)'.'w'w+'b/

希望对你有帮助。

问候。

嵌套组

var wwwUrlPattern = /(http:'/'/)?((www'.)['w-]+('.['w-]+)+(['w.,@?^=%&amp;:'/'$~+#-]*['w@?^=%&amp;'/~+#-]))?/;
text = text.replace( wwwUrlPattern, '<a href="http://$2" target="_blank">$&</a>' );
相关文章：