Обнаружение и обработка URL в JavaScript: регулярные выражения

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

const urls = text.match(/https?:\/\/\S+/g) || [];

Для выделения URL в тексте с использованием JavaScript, вам потребуется всего пара строк кода. Данное регулярное выражение в методе text.match() извлекает URL прямо из строки текста. \S+ обеспечивает выделение последовательности символов без пробелов, начиная от http:// или https:// и до первого обнаруженного пробела. В случае обнаружения URL будет возвращён массив; если URL не обнаружен — возвращается пустой массив.

Работа с разными типами URL

URL может иметь разные формы и не всегда начинаются с http. Имеются и другие протоколы, такие как ftp и file, которые могут присутствовать в структуре URL и должны быть учтены при его выявлении.

Распознавание более широкого спектра паттернов URL

Важно правильно обрабатывать знаки препинания в конце URL, которые примитивное регулярное выражение может неверно включить в состав URL. Для этого можно воспользоваться следующим паттерном:

// "Права на управление URL включают протоколы ftp и file, правильно?" – Офицер Регекс
const urlPattern = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%=~_|$?!:,.]*)/gi;
const urls = text.match(urlPattern) || [];

Это регулярное выражение учитывает различные протоколы и знаки препинания в конце URL, но не включает их в состав самого URL.

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

Обработка ложноположительных срабатываний при обнаружении URL

Иногда регулярное выражение может привести к ошибочному определению URL. Для достижения идеальных результатов можно использовать методы машинного обучения, однако это может быть избыточно сложно. Поэтому оптимальным выбором будет использование существующих инструментов, таких как LinkifyJS, или настроенных шаблонов regex из Linkify для Android.

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

Представьте ваш текст как живую улицу:

"Эй, посмотри на этот замечательный сайт: www.example.com, там есть много интересного!"

Ищем URL среди слов, как иголку в стоге сена:

Обычное слово 🏃‍♂️🏃‍♀️🏃‍♂️ [www.example.com](🚗💨) 🏃‍♀️🏃‍♂️🏃‍♀️

Регулярные выражения функционируют как детективы:

// "Я за вами наблюдаю, URL," – говорит Детектив Регекс
text.match(/https?:\/\/\S+\b/gi);

Они выхватывают URL из потока информации:

Снимки: 📸[www.example.com] 📸[https://fun.net] 📸[http://info.org]

Преобразование обнаруженных URL в кликабельные ссылки

Чтобы превратить найденные URL в гиперссылки, потребуется функция linkify:

// "Подготовка к трансформации в ссылки!" – командует Капитан Регекс
function linkify(inputText) {
  var replacedText, replacePattern;

  replacePattern = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#/%=~_|$?!:,.]*)/gi;
  replacedText = inputText.replace(replacePattern, '<a href="$1" target="_blank">$1</a>');

  replacePattern = /(^|[^/])(www\.[\S]+(\b|$))/gim;
  replacedText = replacedText.replace(replacePattern, '$1<a href="http://$2" target="_blank">$2</a>');

  return replacedText;
}

С помощью метода replace URL-ы преобразуются в HTML-якоря. Задание атрибута "_blank" обеспечивает открытие ссылок в новом окне, не отдаляя пользователя от вашего контента.

Автоматическое преобразование в заданных элементах

Позвольте вашей программе сканировать и преобразовывать текст в выбранных DOM-элементах:

function autoLinkify(selector) {
  document.querySelectorAll(selector).forEach(element => {
    element.innerHTML = linkify(element.textContent);
  });
}

Продвинутое распознавание URL для неискушенных

Для тех, кто стремится добиться особой точности в распознавании URL, следует обратить внимание на RFC 1738 и актуальные списки Топ-доменов. Это поможет обеспечить почти стопроцентное определение URL, включая наиболее современные схемы.

Профессиональные советы по интеграции

• Используйте этот подход для CMS с динамическим контентом.
• Организуйте распознавание электронной почты, аналогичное Linkify для Android. Эффективность — наше всё!
• Не забывайте про санитизацию ввода пользователя. Защитите систему от XSS-атак — безопасность превыше всего!

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