Цель
Необходим скрипт который будет заменять URL'ы страницы на HTML ссылки (<a></a>
). Если URL уже обрамлен тегом <a>
, т.е. уже является ссылкой, то нечего не делать. URL может начинаться с http
, https
или ftp
. URL может содержать как латинские так и кириллические символы.
Решение
Код плагина:
jQuery(function($) { var re = /((http|https|ftp):\/\/[a-zа-я0-9\w?=&.\/-;#~%-]+(?![a-zа-я0-9\w\s?&.\/;#~%"=-]*>))/g; function makeHTML(textNode) { var source = textNode.data; return source.replace(re, function() { var url = arguments[0]; var a = $('<a></a>').attr({'onclick' : 'window.open(\'' + url + '\'); return false;','href': '#', 'target': '_blank'}).text(url); return url.match(/^https?:\/\/$/) ? url : $('<div></div>').append(a).html(); }); }; function eachText(node, callback) { $.each(node.childNodes, function() { if (this.nodeType != 8 && this.nodeName != 'A') { this.nodeType != 1 ? callback(this) : eachText(this, callback); } }); }; $.fn.autolink = function() { return this.each(function() { var queue = []; eachText(this, function(e) { var html = makeHTML(e); if (html != e.data) { queue.push([e, makeHTML(e)]); } }); $.each(queue, function(i, x) { $(x[0]).replaceWith(x[1]); }); }); }; });
Сохраняем этот код в js файл, например autolink.js
Как использовать
Пример использования:
<!DOCTYPE html> <html> <head> <title>autolink test</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="autolink.js"></script> <script> jQuery(function ($) { $('.content').autolink(); }); </script> </head> <body> <div class="content"> <p>Test: http://devreadwrite.com/</p> <p>Тест: http://кодер.укр/</p> </div> </body> </html>
Для автозамены всех URL на странице необходимо поменять код с:
jQuery(function ($) { $('.content').autolink(); });
на:
jQuery(function ($) { $('document.body').autolink(); });
Комментарии
Полезная штука +
ОтветитьА как сделать эту ссылку без перезагрузки страницы? Ajaxом например
Ответить