如何自动将文本URL包装在锚标记中

时间:2013-10-21 00:06:27

标签: javascript jquery html anchor

我有一个为我的客户建立的简单CMS。

这个问题不是他可能通过锚标签发布链接,而是直接复制并粘贴到文本编辑器中。

是否可以使用JavaScript将这些链接包装在锚标记中。所以当页面加载而不是它看起来链接这个:

http://google.com

看起来像这样

<a href="http://google.com" target="_blank">http://google.com</a>

更新

当用户将URL发布到答案/问题时(如果这有助于理解我想要实现的目标),Stackoverflow实际上会执行此操作。

由于

1 个答案:

答案 0 :(得分:1)

你可以尝试这些方面的东西。使用类似'linkify'的布尔属性装饰要使这些替换生效的标记:

<div linkify>something http://google.com something</div><div linkify>something</div>

现在使用linkify set在任何元素内执行替换。

$('*[linkify]').each(function() 
                     { 
                       $(this).html($(this).html().replace(/(?:(https?\:\/\/[^\s]+))/m,
                                                           '<a href="$1">$1</a>')); 
                     });

有一些警告。这根本不是一个很好的正则表达式 - 它只是匹配从http://https://开始直到第一个空白字符的任何内容。寻找更好的URL匹配正则表达式。使用替换.html()意味着它将破坏碰巧属于linkify元素的任何现有链接!如果在文本链接中碰巧出现双引号字符,则会创建断开的锚元素。

您可能会考虑使用某种非常简单的标记来识别链接 - 这比猜测要好得多。