Текст jQuery для связывания скрипта?

Кто-нибудь знает сценарий, который может выбирать все текстовые ссылки на URL-адреса и автоматически заменять их тегами привязки, указывающими на эти места?

For example:

http://www.google.com 

would automatically turn into

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

Примечание. Я хочу этого, потому что не хочу просматривать весь свой контент и заключать его в теги привязки.


javascript html jquery anchor
person Elijah Manor    schedule 29.10.2008    source источник
comment
Является ли javascript единственной доступной для вас средой или у вас есть серверная часть, например php?   -  person DGM    schedule 29.10.2008
comment
Я создал библиотеку, которую вы, возможно, захотите рассмотреть: ali-saleem.github.io/anchorme.js он очень маленький по размеру, очень эффективен, очень чувствителен, дает наименьшее количество ложных срабатываний, поддерживает все TLD, поддерживает IP, FTP. , HTTP или даже без http, пропускает HTML без регулярного выражения, и это в 3 раза быстрее, чем связывание и автолинковка.   -  person Alex C.    schedule 16.07.2015

Ответы (7)


arrow_upward
14
arrow_downward

JQuery здесь не очень поможет, поскольку вас не интересует обход / манипуляции с DOM (кроме создания тега привязки). Если бы все ваши URL были в тегах ‹p class =" url "›, возможно.

Вы, вероятно, хотите использовать ванильное JavaScript-решение, и, по воле судьбы, этому парню следует вы прикрыли.

person Pseudo Masochist    schedule 29.10.2008
comment
Я не согласен, решение этой проблемы включает в себя много обхода DOM (возможно, не много селекторов CSS), и jQuery - прекрасный инструмент для решения этой проблемы. (См. Мой пример черновика плагина jQuery ниже.) - person Már Örlygsson; 30.10.2008

arrow_upward
57
arrow_downward

ПРИМЕЧАНИЕ. Обновленная и исправленная версия этого скрипта теперь доступна по адресу 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:[email protected]
  • ftp://www.server.com/path
  • ... все вышеперечисленное заключено в угловые скобки (т.е. _6 _..._ 7_)

Наслаждаться :-)

person Már Örlygsson    schedule 30.10.2008
comment
Незначительная синтаксическая ошибка: while (i--) {// обратите внимание на лишнюю скобку Спасибо! Этот плагин был именно тем, что я искал. - person Will Moffat; 22.04.2009
comment
Исправлена ​​ошибка, спасибо! - person Már Örlygsson; 27.04.2009
comment
Кстати, обновленная и исправленная версия этого скрипта теперь доступна (GPL / MIT) по адресу github.com/maranomynet/linkify - person Már Örlygsson; 28.04.2010
comment
здорово!. некоторые идеи, установите целевое значение attr в параметрах и прикрепите jquery из google cdn вместо локальной копии. очень-очень полезный кусок js. - person panchicore; 19.02.2011
comment
У меня были проблемы с проектом на GitHub в IE 7 и IE 8. Поэтому я отправил запрос на перенос с новым регулярным выражением. Спасибо. - person John B; 07.06.2011
comment
Вау! Спасибо вам большое за это! Я сделал небольшой jsFiddle из этого, если кто-то хочет увидеть его предварительный просмотр: jsfiddle.net/NathanJohnson/gRLaV < / а> - person Nathan; 29.10.2011
comment
К сожалению, это не работает в Chrome (v27). - person syntagma; 04.05.2013
comment
@ MárÖrlygsson: вы все еще поддерживаете эту библиотеку? Хотел бы включить его в мой сводный обзор - см. билет GitHub. - person Dan Dascalescu; 21.02.2014
comment
не совсем. не на данный момент по крайней мере - person Már Örlygsson; 19.05.2014
comment
Не все варианты использования работают ... jsfiddle.net/npnrm8dq - person SexyMF; 22.06.2015
comment
Спасибо за этот полезный источник. Прекрасно работает для моего проекта. - person Sedat Kumcu; 11.04.2017

arrow_upward
5
arrow_downward

У меня есть эта функция, которую я вызываю

textToLinks: function(text) {

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

arrow_upward
4
arrow_downward

Я предлагаю вам сделать это на своих статических страницах перед рендерингом в браузере, иначе вы переложите бремя вычисления конверсии на своих бедных посетителей. :) Вот как это можно сделать в Ruby (чтение из стандартного ввода, запись в стандартный вывод):

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

Очевидно, вы захотите подумать о том, как сделать это настолько надежным, насколько вы хотите. Вышеупомянутое требует, чтобы все URL-адреса начинались с http, и будет проверяться, не преобразовывать ли URL-адреса в кавычках (т.е. которые могут уже находиться внутри ‹a href="..."›). Он не будет ловить ftp: //, mailto :. Он с радостью преобразует материал в такие места, как