Быстрое внедрение
Если вы хотите быстро преобразовать текстовую ссылку в интерактивные ссылки (внутри dom или строки), вам нужно знать, что эту задачу нелегко сделать самостоятельно. URI сложны, и есть миллионы случаев, когда ваша самореализованная функция может потерпеть неудачу. Например :
function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;
//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '$1');
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1$2');
//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '$1');
return replacedText;
}
Предыдущая функция работала бы, но есть лучший способ решить эту задачу.
Использовать библиотеку (Linkify.js)
Ну, первый пункт — чистый и функциональный, но в некоторых случаях он может потерпеть неудачу. Вместо того, чтобы испытывать головную боль при обучении обработке строки и поиску URL-адресов, мы рекомендуем вам использовать библиотеку, которая будет выполнять всю эту работу за вас.
Мы говорим о Linkify.js. Linkify — это плагин JavaScript для поиска ссылок в виде простого текста и их преобразования в HTML. теги. Он работает со всеми действительными веб-адресами и адресами электронной почты. Чтобы включить linkify в свой проект, посетите домашнюю страницу и загрузите дистрибутив (или используйте npm или bower) и включите сценарии в свой документ:
Linkify предлагает более 1 способа инициализации, с помощью jQuery вы можете напрямую конвертировать DOM-контент в ссылки, например:
Visit site.com , it has a lot of interesting content. You can contact us writing to dev@site.com
$("#linkDemo").linkify({
target:"_blank"
});
Должен выводить:
Визит site.com , в нем много интересного контента. Вы можете связаться с нами, написав dev@site.com
Или используйте только ядро linkify без jQuery (Узнайте больше о режимах здесь):
var str = 'For help with GitHub.com, please email support@github.com
';
var processedContent = linkifyStr(str, options);
// or
// var processedContent = str.linkify();
document.getElementById("linkDemo").innerHTML = processedContent;
Вы можете проверить свой собственный текст в официальном домашняя страница здесь, повеселись !
