3

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

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

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

http://google.com

它看起来像这样

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

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

4

1 回答 1

5

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

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

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

$('*[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元素的任何现有链接！如果您的文本链接中碰巧有双引号字符，它将创建损坏的锚元素。

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

于 2013-10-21T00:57:08.723 回答