jQuery文本链接脚本？ [复制]答案

【问题标题】：jQuery Text to Link Script? [duplicate]jQuery文本链接脚本？ [复制]
【发布时间】：2010-09-19 20:02:31
【问题描述】：

有没有人知道可以选择所有对 URL 的文本引用并自动将它们替换为指向这些位置的锚标记的脚本？

For example:

http://www.google.com 

would automatically turn into

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

注意：我想要这个是因为我不想浏览我的所有内容并用锚标签包装它们。

【问题讨论】：

是 JavaScript 唯一可用的环境，还是你有像 php 这样的服务器后端？
我创建了一个您可能想要考虑的库：ali-saleem.github.io/anchorme.js 它体积非常小，非常高效，非常敏感，误报率最低，支持所有 TLD，支持 IP、FTP、HTTP 甚至没有 http，跳过 HTML，没有正则表达式，它比链接和自动链接器快 3 倍。

标签： javascript jquery html anchor

【解决方案1】：

注意：此脚本的更新和更正版本现已在 https://github.com/maranomynet/linkify（GPL/MIT 许可证）上提供

嗯...对我来说，这似乎是 jQuery 的完美任务。

...这样的事情突然出现在我的脑海中：

// Define: Linkify plugin
(function($){

  var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
      url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g,

      linkifyThis = function () {
        var childNodes = this.childNodes,
            i = childNodes.length;
        while(i--)
        {
          var n = childNodes[i];
          if (n.nodeType == 3) {
            var html = $.trim(n.nodeValue);
            if (html)
            {
              html = html.replace(/&/g, '&amp;')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(url1, '$1<a href="http://$2">$2</a>$3')
                         .replace(url2, '$1<a href="$2">$2</a>$5');
              $(n).after(html).remove();
            }
          }
          else if (n.nodeType == 1  &&  !/^(a|button|textarea)$/i.test(n.tagName)) {
            linkifyThis.call(n);
          }
        }
      };

  $.fn.linkify = function () {
    return this.each(linkifyThis);
  };

})(jQuery);

// Usage example:
jQuery('div.textbody').linkify();

它尝试将所有出现的以下内容转换为链接：

www.example.com/path
http://www.example.com/path
mailto:me@example.com
ftp://www.server.com/path
...以上所有内容都用尖括号括起来（即<...>）

享受:-)

【讨论】：

顺便说一句，此脚本的更新和更正版本现已在 github.com/maranomynet/linkify 上提供（GPL/MIT）
酷！。一些想法，在选项中设置attr目标值，并从google cdn附加jquery而不是本地副本。非常有用的js。
我在 GitHub 上的项目在 IE 7 和 IE 8 中遇到了问题。所以我提交了一个带有新正则表达式的拉取请求。谢谢。
哇！非常感谢你做的这些！如果有人想看它的预览，我做了一点 jsFiddle：jsfiddle.net/NathanJohnson/gRLaV
不幸的是，它不适用于 Chrome (v27)。

【解决方案2】：

JQuery 在这里不会为您提供很多帮助，因为您并不真正关心 DOM 遍历/操作（除了创建锚标记）。如果您所有的网址都在

标签中，那么也许。

一个普通的 JavaScript 解决方案可能是你想要的，就像命运一样，this guy should have you covered。

【讨论】：

我不同意，解决这个问题涉及大量的 DOM 遍历（可能不是很多 CSS 选择器），而 jQuery 是解决这个问题的好工具。（请参阅下面的 jQuery 插件示例草案。）

【解决方案3】：

我有这个函数我调用

textToLinks: function(text) {

    var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g;
    return text.replace(re, "<a href=\"$1\" title=\"\">$1</a>");
  }

【讨论】：

【解决方案4】：

我建议您在呈现到浏览器之前在静态页面上执行此操作，否则您会将转换计算的负担推给可怜的访问者。 :) 以下是您在 Ruby 中的操作方式（从标准输入读取，写入标准输出）：

while line = gets
  puts line.gsub( /(^|[^"'])(http\S+)/, "\\1<a href='\\2'>\\2</a>" )
end

显然，您需要考虑如何使它变得如您所愿。以上要求所有 URL 都以 http 开头，并且将检查不转换引号中的 URL（即可能已经在内）。它不会捕获 ftp://、mailto:。它会很高兴地转换像

最令人满意的解决方案是与您的编辑器一起手动进行转换，这样您就可以观察并批准所有替换。 A good editor 将允许您使用组引用（也称为反向引用）进行正则表达式替换，所以这应该没什么大不了的。

【讨论】：

【解决方案5】：

看看这个 JQuery 插件：https://code.google.com/p/jquery-linkifier/

【讨论】：

那个插件很幼稚。它没有提到现有技术，即使有tons of URL parsing and validation libraries out there。

【解决方案6】：

有时在服务器端做这个不是一种选择。考虑一个客户端 Twitter 小部件（使用 jsonp 直接访问 Twitter API），并且您希望动态链接 Tweets 中的所有 URL...

【讨论】：

【解决方案7】：

如果您想从另一个角度解决问题...如果您可以通过 php 和 HTML Purifier 运行页面，它可以自动格式化输出并链接任何 url。

【讨论】：