65. Regex Syntax

JavaScript: Мозги. Regex Syntax

Регулярные выражения (Regex) – мощный инструмент для поиска, сопоставления и манипулирования текстом. В этом уроке мы разберемся с основными элементами синтаксиса Regex в JavaScript, чтобы вы могли эффективно использовать их в своих проектах.

Основы Regex Syntax

Регулярное выражение – это последовательность символов, определяющая шаблон поиска. В JavaScript, Regex создаются двумя способами:

1. Литеральная нотация: /шаблон/флаги
2. Конструктор RegExp: new RegExp('шаблон', 'флаги')

Простейший пример:

// Литеральная нотация
const regexLiteral = /hello/;

// Конструктор RegExp
const regexConstructor = new RegExp('world');

Основные элементы синтаксиса:

• Обычные символы: Соответствуют самим себе. Например, /abc/ соответствует строке “abc”.

• Метасимволы: Имеют специальное значение.

  • . (точка): Соответствует любому символу, кроме новой строки.
  • ^ (карет): Соответствует началу строки.
  • $ (доллар): Соответствует концу строки.
  • * (звездочка): Соответствует предыдущему символу 0 или более раз.
  • + (плюс): Соответствует предыдущему символу 1 или более раз.
  • ? (вопросительный знак): Соответствует предыдущему символу 0 или 1 раз.
  • [] (квадратные скобки): Определяют набор символов. [abc] соответствует ‘a’, ‘b’ или ‘c’.
  • [^] (карет в скобках): Отрицание набора символов. [^abc] соответствует любому символу, кроме ‘a’, ‘b’ или ‘c’.
  • | (вертикальная черта): Альтернатива. a|b соответствует ‘a’ или ‘b’.
  • () (круглые скобки): Группировка и захват.
  • \ (обратный слеш): Экранирование метасимволов. \. соответствует точке.

Примеры:

const text = "This is a test string with numbers 123 and special characters like $#@.";

// Соответствует строке, начинающейся с "This"
const startsWithThis = /^This/;
console.log(startsWithThis.test(text)); // true

// Соответствует строке, заканчивающейся на "."
const endsWithDot = /\.$/;
console.log(endsWithDot.test(text)); // true

// Соответствует любому символу, повторяющемуся 3 раза
const threeAnyCharacters = /.../;
console.log(threeAnyCharacters.test(text)); // true

// Соответствует цифрам
const digits = /[0-9]+/;
console.log(digits.test(text)); // true

// Соответствует специальным символам
const specialChars = /[$#@]+/;
console.log(specialChars.test(text)); // true

Флаги:

• g (global): Поиск всех совпадений, а не только первого.
• i (ignore case): Игнорировать регистр при поиске.
• m (multiline): Включает многострочный режим.

const text = "Hello world\nhello WORLD";

// Поиск всех "hello", игнорируя регистр
const allHelloIgnoreCase = /hello/gi;
console.log(text.match(allHelloIgnoreCase)); // ["Hello", "hello"]

Жизненный пример

Regex широко используются в веб-разработке. Например, для:

• Валидации форм: Проверка правильности введенных email, номеров телефонов и т.д.
• Поиска и замены текста: В редакторах кода, текстовых процессорах.
• Парсинга URL: Извлечение информации из URL-адресов.
• Маршрутизации в веб-фреймворках: Определение, какой обработчик должен быть вызван для определенного URL.

Многие JavaScript-фреймворки, такие как React, Angular и Vue.js, используют Regex для валидации данных, маршрутизации и других задач. Например, валидация email в React может выглядеть так:

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

console.log(validateEmail("[email protected]")); // true
console.log(validateEmail("invalid-email")); // false

Ключевые моменты

• Regex – мощный инструмент для работы с текстом.
• Синтаксис Regex может показаться сложным, но он становится понятным с практикой.
• Используйте онлайн-инструменты для тестирования ваших Regex.
• Regex широко используются в веб-разработке, особенно для валидации и обработки текста.
• Не бойтесь экспериментировать и искать примеры в интернете.

Интерактивный пример