Научете Regex със 7 примера.

Въведение

Регулярните изрази (regex или RegExp) са мощни инструменти за съвпадение на шаблони и манипулиране на текст. Те предоставят кратък начин за търсене, извличане и манипулиране на низове въз основа на конкретни модели. В това ръководство ще ви преведем през основите на регулярните изрази, като използваме практически примери в JavaScript. До края на тази статия ще имате солидна основа, за да започнете ефективно да използвате regex във вашите проекти.

Какво представляват регулярните изрази?

Регулярните изрази са последователности от знаци, които определят модел на търсене. Те се използват за съпоставяне, търсене, замяна и манипулиране на текстови данни. В JavaScript можете да създавате регулярни изрази, като използвате конструктора RegExp или като използвате регулярни изразни литерали.

Създаване на регулярни изрази в JavaScript

Можете да създадете регулярен израз, като използвате конструктора RegExp или регулярни изразни литерали.
Пример:

const pattern = /abc/;
const pattern = new RegExp('abc');

Образци на регулярен израз: Образецът на регулярен израз е комбинация от знаци, които определят модел на търсене. Някои общи елементи, използвани в шаблоните, включват:

  • Литерали: обикновени знаци като a, b, 1 и др.
  • Метасимволи: Знаци със специално значение като . (съвпада с произволен знак), * (съвпада с нула или повече срещания), + (съвпада с едно или повече срещания), ? (съвпада с нула или едно срещане) и др.
  • Класове знаци: Представени от [...], съответстват на всеки знак в скобите. Например [a-z] съответства на всяка малка буква.
  • Котви: Представени от ^ (начало на низ) и $ (край на низ), посочете позицията на съвпадението в низа.
  • Квантори: Посочете колко пъти трябва да се появи знак или група. Например, {n} съвпада точно с n срещания, {n,} съвпада с n или повече срещания, {n,m} съвпада между n и m срещания.

Методи за регулярен израз:
a. test() Метод: Проверява дали даден низ съдържа съвпадение за шаблона.

const pattern = /abc/;
const result = pattern.test("abcdef"); // true

b. exec() Метод:
Връща масив, съдържащ подробности за първото съвпадение или null, ако не е намерено съвпадение.

const pattern = /abc/;
const result = pattern.exec("abcdef"); // ["abc"]

° С. match() Метод:

Връща масив от всички съвпадения в низ или null, ако не бъде намерено съвпадение.

const pattern = /abc/g;
const result = "abcabc".match(pattern); // ["abc", "abc"]

д. search() Метод:

Връща индекса на първото съвпадение или -1, ако не е намерено съвпадение.

const pattern = /abc/;
const index = "abcdef".search(pattern); // 0

д. replace() Метод:
Заменя съвпаденията с определен заместващ низ.

const pattern = /abc/;
const newString = "abcdef".replace(pattern, "xyz"); // "xyzdef"

Модификатори:

Модификаторите се използват заедно с моделите на регулярни изрази, за да променят поведението си. Някои често срещани модификатори включват:

  • i: Съпоставяне без разлика на малки и главни букви.
  • g: Глобално съвпадение (намерете всички съвпадения, вместо да спирате след първото съвпадение).
  • m: Многоредово съвпадение (третирайте началните ^ и крайните $ котви като работещи на всеки ред)

Примери:

  1. Съвпадащи дати:

Регулярните изрази могат да се използват за съпоставяне на конкретни шаблони в текста. Нека съпоставим датите във формат „дд-мм-гггг“.

const datePattern = /\d{2}-\d{2}-\d{4}/;
const text = "Today's date is 08-11-2023";
const date = text.match(datePattern);
console.log(date); // ["08-11-2023"]

Обяснение:

  • /\d{2}-\d{2}-\d{4}/ е моделът на регулярен израз.
  • \d съвпада с всяка цифра (0-9).
  • {2} указва, че предходният елемент (цифра) трябва да се появи точно 2 пъти.
  • - съвпада буквално с тире.
  • {4} указва, че предходният елемент (цифра) трябва да се появи точно 4 пъти.
  • Резултатът е модел, който съответства на дати във формат „дд-мм-гггг“.

2. Извличане на телефонни номера

Можете да извлечете телефонни номера от текст с помощта на регулярен израз.

Пример:

const phonePattern = /\d{3}-\d{3}-\d{4}/g;
const text = "Contact us at 123-456-7890 or 987-654-3210";
const phoneNumbers = text.match(phonePattern);
console.log(phoneNumbers); // ["123-456-7890", "987-654-3210"]

Обяснение:

  • /\d{3}-\d{3}-\d{4}/g е моделът на регулярен израз.
  • \d съвпада с всяка цифра (0-9).
  • {3} указва, че предходният елемент (цифра) трябва да се появи точно 3 пъти.
  • - съвпада буквално с тире.
  • Модификаторът g се използва за извършване на глобално търсене, намирайки всички срещания в текста.
  • Резултатът е модел, който съответства на телефонни номера във формат „###-###-####“.

3. URL адрес за валидиране:

const urlPattern = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\/?$/;
const urls = [
  "https://www.example.com",
  "http://sub.example.co.uk",
  "www.invalid-url",
];
for (const url of urls) {
  const isValid = urlPattern.test(url);
  console.log(`${url} is valid: ${isValid}`);
}

Обяснение:

  • ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}\/?$ е моделът на регулярен израз.
  • ^ и $ са котви, които съответстват съответно на началото и края на низа.
  • (https?:\/\/)? съответства на незадължителен 'http://' или 'https://'.
  • (www\.)? съответства на незадължителен 'www.'.
  • [a-zA-Z0-9.-]+ съответства на един или повече буквено-цифрови знаци, точки и тирета (име на домейн).
  • \. съвпада буквално с точката (преди домейна от първо ниво).
  • [a-zA-Z]{2,} съвпада с поне две букви (домейн от първо ниво).
  • \/? съответства на незадължителна крайна наклонена черта.
  • Цикълът тества всеки URL, за да види дали отговаря на шаблона.

4. Замяна на думи:

const text = "The quick brown fox jumps over the lazy dog";
const wordToReplace = /fox/i;
const replacedText = text.replace(wordToReplace, "cat");
console.log(replacedText); // "The quick brown cat jumps over the lazy dog"

Обяснение:

  • /fox/i е моделът на регулярен израз.
  • i е модификатор за съпоставяне без значение за малки и големи букви.
  • Методът replace() замества първото появяване на 'лисица' (без значение за малки и големи букви) с 'котка' в дадения текст.

5. Извличане на хаштагове:

const hashtagPattern = /#\w+/g;
const text = "Having fun at #beach with friends! #summer #vacation";
const hashtags = text.match(hashtagPattern);
console.log(hashtags); // ["#beach", "#summer", "#vacation"]

Обяснение:

  • /#\w+/g е моделът на регулярен израз.
  • # съвпада буквално с хеш символа.
  • \w+ съответства на един или повече знаци от дума (букви, цифри или долна черта).
  • Модификаторът g се използва за глобално съпоставяне, намиране на всички хаштагове в текста.

6. Валидиране на имейл адреси:

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const emails = [
  "[email protected]",
  "invalid-email",
  "[email protected]",
];
for (const email of emails) {
  const isValid = emailPattern.test(email);
  console.log(`${email} is valid: ${isValid}`);
}

Обяснение:

  • /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ е моделът на регулярен израз.
  • ^ и $ са котви, които съответстват съответно на началото и края на низа.
  • [a-zA-Z0-9._%+-]+ съответства на един или повече буквено-цифрови знаци, точки, знаци за процент, знаци плюс, тирета и долни черти (потребителско име).
  • @ съответства буквално на символа at.
  • [a-zA-Z0-9.-]+ съответства на един или повече буквено-цифрови знаци, точки и тирета (име на домейн).
  • \. съвпада буквално с точката (преди домейна от първо ниво).
  • [a-zA-Z]{2,} съвпада с поне две букви (домейн от първо ниво).
  • Цикълът тества всеки имейл адрес, за да види дали отговаря на шаблона.

7. Извличане на числа от низ:

const text = "The total cost is $123.45, including tax.";
const numberPattern = /\d+(\.\d+)?/g;
const numbers = text.match(numberPattern);
console.log(numbers); // ["123.45"]

Обяснение:

  • /\d+(\.\d+)?/g е моделът на регулярен израз.
  • \d+ съвпада с една или повече цифри.
  • (\.\d+)? съответства на незадължителна група, съдържаща точка и една или повече цифри (десетична част).
  • Модификаторът g се използва за глобално съпоставяне, намиране на всички числа в текста.

Заключение

Регулярните изрази са ценен инструмент за съвпадение на шаблони и манипулиране на текст в JavaScript. Като разберете основите и практикувате с практически примери, можете да впрегнете силата на регулярния израз, за ​​да разрешите широк набор от свързани с текст задачи във вашите проекти. Не забравяйте да експериментирате и тествате своите регулярни изрази, за да се уверите, че отговарят на специфичните ви нужди. Приятно кодиране!