如何在锚标签中自动包装文本 URL？

Question

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

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

有没有办法使用 JavaScript 将这些链接包装在锚标记中？因此，当页面加载而不是看起来链接时：

http://google.com

它看起来像这样

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

当用户将 URL 发布到答案/问题时，Stack Overflow 实际上会这样做（如果这有助于理解我想要实现的目标）。

Answer 1

你可以按照这些思路尝试一些东西。使用自定义属性装饰您希望这些替换生效的标签，例如data-linkify：

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

现在在任何带有data-linkifyset 的元素中执行替换。

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

有一些警告。这根本不是一个很好的正则表达式？-？它只是匹配以第一个空格字符开头http://或https://直到第一个空格字符的任何内容。寻找更好的 URL 匹配正则表达式。

此外，使用 replace against.html()意味着它将破坏碰巧属于您的data-linkify元素的任何现有链接！如果您的文本链接中碰巧有双引号字符，则会创建损坏的锚元素。

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