jQuery 文本链接脚本?

IT技术 javascript jquery html anchor
2021-02-07 08:34:24

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

For example:

http://www.google.com 

would automatically turn into

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

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

6个回答

注意:此脚本的更新和更正版本现在可在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
  • ...以上所有内容都用尖括号括起来(即<... >

享受 :-)

凉爽的!。一些想法,在选项中设置 attr 目标值,并从谷歌 CDN 附加 jquery 而不是本地副本。非常非常有用的一段js。
2021-03-15 08:34:24
顺便说一句,此脚本的更新和更正版本现已在github.com/maranomynet/linkify 上可用(GPL/MIT)
2021-03-17 08:34:24
不幸的是,它不适用于 Chrome (v27)。
2021-03-19 08:34:24
哇!非常感谢你做的这些!如果有人想看到它的预览,我做了一些 jsFiddle:jsfiddle.net/NathanJohnson/gRLaV
2021-03-31 08:34:24
我在 IE 7 和 IE 8 中的 GitHub 上的项目有问题。所以我提交了一个带有新正则表达式的拉取请求。谢谢。
2021-04-10 08:34:24

JQuery 不会在这里帮助你很多,因为你并不真正关心 DOM 遍历/操作(除了创建锚标记)。如果您所有的 URL 都在 <p class="url"> 标签中,那么也许。

一个普通的 JavaScript 解决方案可能就是你想要的,而且正如命运所愿,这个人应该为你提供帮助

我不同意,解决这个问题涉及大量的 DOM 遍历(可能不是很多 CSS 选择器),而 jQuery 是解决这个问题的好工具。(请参阅我下面的 jQuery 插件示例草稿。)
2021-03-27 08:34:24

我有这个功能

textToLinks: function(text) {

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

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

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

显然,您需要考虑如何使它像您希望的那样健壮。以上要求所有 URL 以 http 开头,并且将检查不转换引号中的 URL(即可能已经在 <a href="..."> 内)。它不会捕获 ftp://、mailto:。它会很高兴地在像 <script> 主体这样的地方转换材料,你可能不希望发生这种情况。

最令人满意的解决方案是与您的编辑手动进行转换,以便您可以观察并批准所有替换。 一个好的编辑器会让你用组引用(又名反向引用)进行正则表达式替换,所以这应该没什么大不了的。

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

那个插件很幼稚。它没有提到现有技术,即使有大量的 URL 解析和验证库
2021-03-25 08:34:24