Вы пытаетесь справиться с регулярными выражениями ссылок в JavaScript? Не волнуйтесь, я вас прикрою! В этой статье мы рассмотрим несколько упрощенных методов сопоставления и извлечения URL-адресов с использованием регулярных выражений (регулярных выражений). Так что хватайте шляпу программиста и приступайте!

Метод 1: базовое сопоставление URL-адресов
Давайте начнем с простого шаблона регулярного выражения для сопоставления URL-адресов:

const text = "Check out my website at https://www.example.com!";
const regex = /https?:\/\/[^\s/$.?#].[^\s]*/g;
const matches = text.match(regex);
console.log(matches);

Выход:

["https://www.example.com"]

Объяснение:

• Шаблон регулярного выражения /https?:\/\/[^\s/$.?#].[^\s]*/gсоответствует URL-адресам, начинающимся с «http://» или «https://», за которыми следуют любые символы без пробелов до следующего символа пробела или конец строки.

Метод 2: извлечение компонентов URL
Если вам нужно извлечь определенные компоненты из URL, например домен или параметры запроса, вы можете изменить шаблон регулярного выражения:

const url = "https://www.example.com/path?param=value";
const regex = /(https?:\/\/)?([^\/\s]+)(\/[^?\s]*)?(\?[^#\s]*)?/;
const [, protocol, domain, path, query] = url.match(regex);
console.log("Protocol:", protocol);
console.log("Domain:", domain);
console.log("Path:", path);
console.log("Query:", query);

Выход:

Protocol: https://
Domain: www.example.com
Path: /path
Query: ?param=value

Объяснение:

• Шаблон регулярного выражения (https?:\/\/)?([^\/\s]+)(\/[^?\s]*)?(\?[^#\s]*)?разбивает URL-адрес на компоненты.
• Компоненты собраны с помощью групп, обозначенных круглыми скобками.
• Вызов url.match(regex)возвращает массив, в котором первый элемент соответствует полному совпадению, а последующие элементы соответствуют захваченным группам.
• Используя деструктурирующее присваивание, мы присваиваем каждой захваченной группе отдельную переменную для дальнейшей обработки.

Метод 3: анализ нескольких URL-адресов.
Если у вас есть текстовый блок, содержащий несколько URL-адресов, вы можете извлечь их, используя глобальное сопоставление регулярных выражений:

const text = "Visit my websites: https://www.example1.com and http://www.example2.com!";
const regex = /https?:\/\/[^\s/$.?#].[^\s]*/g;
const matches = text.match(regex);
console.log(matches);

Выход:

["https://www.example1.com", "http://www.example2.com"]

Объяснение:

• Добавляя флаг gк шаблону регулярного выражения (/https?:\/\/[^\s/$.?#].[^\s]*/g), мы активируем глобальное сопоставление, которое находит все вхождения шаблона во входной строке.

Метод 4: проверка URL
Регулярное выражение также можно использовать для проверки того, является ли данная строка допустимым URL-адресом. Вот пример:

function isValidURL(url) {
  const regex = /^(https?:\/\/)?([^\s/$.?#].[^\s]*)$/;
  return regex.test(url);
}
console.log(isValidURL("https://www.example.com")); // true
console.log(isValidURL("not a valid URL")); // false

Объяснение:

• Шаблон регулярного выражения ^(https?:\/\/)?([^\s/$.?#].[^\s]*)$гарантирует, что вся строка соответствует URL-адресу.
• Якоря ^и $обозначают начало и конец строки соответственно.
• Метод test()проверяет, соответствует ли данная строка шаблону регулярного выражения, и возвращает логическое значение.

Подведение итогов
Regex — мощный инструмент для работы со ссылками в JavaScript. В этой статье мы рассмотрели различные методы сопоставления, извлечения компонентов и проверки URL-адресов с использованием шаблонов регулярных выражений. Используя эти методы, вы сможете эффективно решать задачи, связанные со ссылками, в своих проектах JavaScript.

Не забывайте экспериментировать с различными шаблонами и корректировать их в соответствии со своими конкретными требованиями. Приятного кодирования!