如何在锚标记中自动换行文本 URL

How do I automatically wrap text URLs in anchor tags?

本文关键字：自动换行 文本 URL      更新时间：2023-09-26

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

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

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

http://google.com

它看起来像这样

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

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

你可以尝试一些类似的东西。使用自定义属性（如 data-linkify ）修饰您希望这些替换生效的标记

： 
<div data-linkify>something http://google.com something</div><div linkify>something</div>
现在，在任何

元素中执行data-linkify集合的替换。

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

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

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

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

相关文章：