Замена всех ссылок на HTML-ссылки в тексте: регулярки

Быстрый ответ

// Добро пожаловать в мир надёжных старых регулярных выражений
const linkify = (text) => text.replace(/\b(http:\/\/|https:\/\/\S+)/gi, '<a href="$&" target="_blank">$&</a>');

// Ознакомимся с этим приёмом на примере
console.log(linkify('Посетите http://example.com')); // "Посетите <a href="http://example.com" target="_blank">http://example.com</a>"

В фокусе удивительный метод .replace() в сочетании с регулярным выражением, распознающим URL. Он обрабатывает 'http://' и 'https://' текстовые ссылки, преобразуя их в анкоры <a> быстрее, чем вы успеете произнести "JavaScript".

Визуализация

Приставим, каким будет визуальное преобразование простого URL в гиперссылку:

До: "Обратите внимание на сайт 🏜️ http://example.com 🏜️ Интересно, не так ли?"

Попросим наше регулярное выражение волшебным образом преобразовать ссылки, ведущие в пустыню 🏜️, в уютные оазисы гиперссылок 🌺:

// Применяем магию регулярных выражений и достигаем цели!
const enrichText = (text) => text.replace(/(http\S+)/g, '<a href="$1">$1</a>');

После: "Обратите внимание на сайт 🌺 <a href="http://example.com">http://example.com</a> 🌺 Интересно, не так ли?"

Эх, вуаля! Простые URL преобразовались в интерактивные ссылки, добавляющие в наш текст нотки неподдельного оживления.

Борьба с URL: использование библиотек

Для обеспечения гарантированной надёжности рекомендуется использовать специализированные библиотеки для работы с URL. Именно они облегчают обработку редких и сложных ситуаций, например, с мультиязычными доменными именами, доменами верхнего уровня, различными знаками препинания и IPV6-адресами. Рассмотрим несколько действительно эффективных библиотек для данной задачи: linkify, AnchorMe, Autolinker.js.

linkify – не экспериментировать новичкам

Linkify безупречно преобразует URL и электронные адреса в кликабельные ссылки, при этом избегая дублирования.

var linkifiedText = linkify('Пишите на: contact@example.com. Посетите: http://example.com');

Подробнее об этом расскажет наш спикер на видео

AnchorMe.js – учёба не предусмотрена

Более прогрессивный AnchorMe создаёт кликабельные ссылки из URL и электронных адресов, не настолько жестко контролируя процесс, как это делает linkify.

var anchoredText = anchorme('Загляните на https://portfolio.me и отправьте мне письмо');

Autolinker.js – новый герой из Marvel

Autolinker.js – это разносторонний инструмент, который связывает URL, электронные адреса, номера телефонов, хэштеги и упоминания. При этом он предоставляет обширные возможности для настройки.

var autoLinkedText = Autolinker.link('Заходите на http://homepage.com и не забывайте #ставитьлайки и #подписываться');

Эволюция ссылок: шаг вперёд

Не ограничивайтесь http и https

Стремитесь к переработке всех видов URL, будь то http, https, ftp, file или даже обычный префикс "www":

const linkifyAll = text => text.replace(/(?:https?|ftp):\/\/[\n\S]+/g, '<a href="$&">$&</a>');

Предупреждайте двойное создание ссылок

Для предотвращения двойного создания ссылок, убедитесь, что URL ещё не включён в якорь:

const avoidDoubleLinking = text => text.replace(/(href=")?(https?:\/\/\S+)/gi, 
(match, capture) => capture ? match : `<a href="${match}">${match}</a>`);

Отношение к задаче — всерьёз

Мы подходим к процессу конвертации URL ответственно и учитываем требования по эффективности при обработке текста в реальном времени или с динамически генерируемым содержимым:

// Наш Регулярный ниндзя готов к бою! Будьте бдительны...
const safeLinkify = text => {
  const urlRegex = /.../; // Ваше сложное и изящное регулярное выражение
  let matchArray;
  
  while ((matchArray = urlRegex.exec(text)) !== null) {
    let match = matchArray[0];
    // Напоминает сцену из "Миссии невыполнима", действительно зрелищно
  }
  return text;  // И текст со ссылками жили долго и счастливо!
};

Полезные материалы

1. Документация: метод execCommand() – Web API | MDN – Подробное руководство по MDN для execCommand, настоящего волшебного инструмента для манипулирования содержимым.
2. javascript – Какое надёжное регулярное выражение для поиска URL? – Stack Overflow – Откройте для себя обсуждение регулярных выражений на Stack Overflow. URL тоже приветствуются!
3. GitHub – gregjacobs/Autolinker.js: Утилита для автоматического связывания URL, электронных адресов, номеров телефонов, учётных записей Twitter и хештегов в тексте/HTML – Познакомьтесь поближе с Autolinker.js на GitHub, пристанищем идеального кода.
4. Элемент: свойство innerHTML – Web API | MDN – Инструкция по использованию innerHTML для управления DOM, составленная экспертами MDN.
5. Документация: метод createElement() – Web API | MDN – Узнайте, как создавать элементы в стиле настоящего мастера JavaScript.
6. regex101: создание, тестирование и отладка регулярных выражений – Присоединитесь к школе регулярных выражений: здесь вы сможете отточить своё мастерство. С его помощью любой URL поддастся вам.