Проверка строки в JavaScript на URL: методы без регулярных выражений

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

Вот простой и современный способ проверить, является ли строка в JavaScript URL-ссылкой:

const isValidUrl = (str) => {
  try {
    // Даже URL-адреса нуждаются в проверке
    return !!new URL(str);
  }
  catch (_) {
    // Если URL оказался некорректным
    return false;
  }
};

// Попробуем наши усилия на практике
console.log(isValidUrl("https://example.com")); // Возвращает true или false

Этот подход использует конструктор URL без привлечения регулярных выражений, основываясь на встроенном API JavaScript.

Подробности метода

Указанный код использует конструктор URL для проверки URL-ссылок в соответствии со стандартом RFC 3986. Если URL невалидный, конструктор генерирует исключение, которое мы перехватываем и интерпретируем как false.

Обратите внимание, что в случае нестандартных URL (например, без указания протокола) полезно включить проверку на валидность относительных ссылок и протоколов. Это особенно актуально при валидации пользовательского ввода.

Проверка сложных URL

Regex: изысканный подход

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

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

Изощрённые URL-паттерны и JS RegEx

Для особо сложных URL, содержащих логин, пароль, порт и прочие детали, регулярные выражения в JavaScript могут предложить более эффективное решение:

const regex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
const isValidComplexUrl = (url) => regex.test(url);

// Проверим действительно сложные URL
console.log(isValidComplexUrl("https://user:pass@example.com:8080/search?q=javascript#start")); // true

Потенциальные проблемы

• Искажение действительности: объект URL может принять свойства, такие как href, даже если путь является некорректным.
• Проблемы с кодированием: домены с не-ASCII символами требуют преобразования в punycode.
• Отсутствие протокола: URL вида //example.com могут вызвать проблемы при валидации.

Взгляд за пределы регулярных выражений

Готовые решения

Существует множество фреймворков и библиотек, предлагающих уже готовые функции для работы с URL. Стоит обратить на них внимание как на альтернативу, чтобы упростить код и повысить его надёжность.

Осторожность при использовании конструктора URL

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

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

Представьте процесс проверки URL как контроль на въезде в аэропорту:

Процесс проверки URL:

1. Документ (📄) = Строка
2. Въездная виза (🛂) = `http://` или `https://`
3. Пункт назначения (🗺️) = Домен
4. Проверка при проходе через шлюз (🚪) = Пути и параметры

Валидный URL:

🛂✅ 🗺️✅ 🚪✅ | `https://www.example.com/search?q=javascript`

Доступ запрещён (неверный URL):

🛂❌ 🗺️❓ 🚪❓ | `любой текст`

Процесс завершён. Шлюз открыт для валидных URL и закрыт для некорректных.

Мысли вслух: тестирование и настройка

Комплексное тестирование

Создайте тестовый набор URL, включая как реальные URL-ссылки, так и вымышленные, включая короткие ссылки, международные домены и относительные URL.

Внимание к спецсимволам

Тщательно протестируйте ваш метод на способность корректно обрабатывать спецсимволы и параметры, берите во внимание правильность обработки кодировки URL.

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

1. URL: URL() конструктор – Web APIs | MDN — Гид по использованию URL API в JavaScript.
2. Проверка наличия URL в строке JavaScript – Stack Overflow — Базовые сведения о валидации URL.
3. regex-weburl.js · GitHub — Обширное регулярное выражение для валидации URL.
4. JavaScript RegExp Object — Обучающий материал по работе с регулярными выражениями в JavaScript.
5. RegExr: Learn, Build, & Test RegEx — Место для экспериментов с regex.
6. validator – npm — Библиотека для валидации и очистки данных.
7. Список схем URI – Wikipedia — Информация о разнообразии URL и URI.