Ласкаво просимо до цього повного посібника з регулярних виразів у JavaScript! У цій статті ми детально розглянемо, що таке регулярні вирази, як вони використовуються в JavaScript і як вони можуть допомогти вам спростити й оптимізувати ваш код. Від основ до практичних прикладів, ми охопимо все, що вам потрібно знати, щоб почати максимально використовувати регулярні вирази у своїх проектах JavaScript. Тож почнемо!
Знайомство з регулярними виразами
Регулярні вирази — це шаблони пошуку, які використовуються для пошуку та обробки тексту в рядках символів. Вони складаються з комбінації літеральних символів і метасимволів, які визначають певні правила пошуку збігів у тексті. Ці правила можуть включати пошук певних символів, діапазонів символів, повторень, альтернатив тощо.
У JavaScript регулярні вирази створюються за допомогою класу RegExp або за допомогою літералу /patrón/. Шаблон — це сам регулярний вираз, укладений між скісними рисками. Давайте розглянемо простий приклад:
const regex = /hola/;
У цьому прикладі ми створили регулярний вираз, який шукатиме рядок «привіт» у тексті. Тепер, коли ми маємо базове розуміння того, що таке регулярні вирази, давайте дослідимо деякі ключові поняття та розширені методи роботи з ними в JavaScript.
Базовий синтаксис регулярних виразів
Регулярні вирази в JavaScript складаються з кількох ключових елементів, які дозволяють нам визначати складніші моделі пошуку. Ці елементи включають літеральні символи, метасимволи, класи символів, квантори, прив’язки тощо. Давайте розглянемо кілька прикладів цих елементів:
Літеральні символи
Літеральні символи – це символи, які шукаються, коли вони з’являються в тексті. Наприклад, регулярний вираз /hola/ шукатиме послідовність символів «привіт» у текстовому рядку. Важливо зауважити, що регулярні вирази чутливі до регістру, тому /hola/ не відповідатиме "Hello" або "HELLO".
Метасимволи
Метасимволи — це спеціальні символи, які мають особливе значення в регулярних виразах. Наприклад, метасимвол . Він використовується для представлення будь-якого символу, крім символу нового рядка. Іншим поширеним метасимволом є ^, який використовується для позначення початку текстового рядка. Наприклад, регулярний вираз /^hola/ відповідатиме будь-якому текстовому рядку, який починається з "привіт".
Класи персонажів
Класи символів використовуються для пошуку будь-якого символу в певному наборі. Наприклад, регулярний вираз /[aeiou]/ відповідатиме будь-якій голосній у текстовому рядку. Також можна використовувати діапазони символів у класах символів. Наприклад, регулярний вираз /[a-z]/ відповідатиме будь-якій малій літері.
Квантори
Квантори використовуються для визначення кількості входжень елемента в регулярний вираз. Наприклад, квантор * вказує на те, що попередній елемент може з'являтися нуль або більше разів. Квантор + вказує, що попередній елемент має з'явитися один або кілька разів. Наприклад, регулярний вираз /a+/ відповідатиме одній або декільком буквам "a" у текстовому рядку.
Якоря
Якір використовується для позначення місця збігу в текстовому рядку. Наприклад, якір \b відповідає межі слова. Наприклад, регулярний вираз /bholab/ відповідатиме лише слову "привіт" як a повне слово, без відповідності довшим словам, які містять «привіт» як частину.
Це лише кілька прикладів базового синтаксису регулярних виразів у JavaScript. У міру прочитання цієї статті ми розглянемо більш складні концепції та методи роботи з регулярними виразами в JavaScript.
Базовий пошук відповідності
Однією з найпоширеніших операцій із регулярними виразами є пошук збігів у текстовому рядку. У JavaScript ми можемо використовувати метод search() щоб знайти перший збіг регулярного виразу в текстовому рядку. Давайте подивимося на приклад:
const texto = "¡Hola, mundo!"; const regex = /mundo/; const indice = texto.search(regex); console.log(indice); // 7
У цьому прикладі ми використали метод search() щоб знайти перший збіг регулярного виразу /mundo/ у текстовому рядку "Hello, world!" Метод search() повертає індекс першої знайденої відповідності або -1, якщо відповідності не знайдено.
Крім методу search(), JavaScript також надає інші корисні методи для роботи з регулярними виразами, наприклад match(), replace(), split() y test(). Кожен із цих методів має власне призначення та може використовуватися відповідно до ваших конкретних потреб.
Використання модифікаторів і прапорців
У JavaScript регулярні вирази можуть містити модифікатори та позначки, які дозволяють здійснювати гнучкіший і налаштований пошук. Модифікатори додаються в кінець регулярного виразу та змінюють його поведінку. Деякі з найпоширеніших модифікаторів:
я (нечутливий)
Модифікатор i використовується для виконання пошуку без урахування регістру. Наприклад, регулярний вираз /hola/i відповідатиме як «hello», так і «Hello» або «HELLO».
g (глобальний)
Модифікатор g Він використовується для виконання глобального пошуку по всьому текстовому рядку замість зупинки на першому знайденому збігу. Наприклад, регулярний вираз /a+/g відповідатиме всім входженням однієї чи кількох букв "a" у текстовому рядку.
м (багаторядковий)
Модифікатор m Він використовується для виконання пошуку в кількох рядках текстового рядка. Наприклад, регулярний вираз /^hola/m відповідатиме слову "привіт" на початку кожного рядка в текстовому рядку.
Крім модифікаторів, JavaScript також дозволяє використовувати прапорці в регулярних виразах. Прапорці додаються після другої косої риски під час створення регулярного виразу за допомогою класу RegExp. Деякі з найпоширеніших прапорів:
я (нечутливий)
Як модифікатор i, прапор i виконує пошук без урахування регістру. Наприклад, регулярний вираз new RegExp("hola", "i") відповідатиме як «hello», так і «Hello» або «HELLO».
g (глобальний)
Як модифікатор g, прапор g виконує глобальний пошук у всьому текстовому рядку. Наприклад, регулярний вираз new RegExp("a+", "g") відповідатиме всім входженням однієї чи кількох букв "a" у текстовому рядку.
м (багаторядковий)
Як модифікатор m, прапор m виконує пошук у кількох рядках текстового рядка. Наприклад, регулярний вираз new RegExp("^hola", "m") відповідатиме слову "привіт" на початку кожного рядка в текстовому рядку.
Використання модифікаторів та прапорців у регулярних виразах JavaScript може бути дуже корисним для адаптації пошуку до різних випадків та конкретних вимог. Експериментуйте з ними та дізнайтеся, як ви можете максимально використати ці функції у своєму коді.
Метасимволи та спеціальні символи
Метасимволи та спеціальні символи є ключовими елементами в регулярних виразах, які дозволяють нам виконувати більш потужний і гнучкий пошук. Ми вже згадували деякі метасимволи, наприклад . y ^, але є багато інших, які ви можете використовувати у своїх регулярних виразах. Давайте розглянемо деякі з найпоширеніших метасимволів і спеціальних символів:
. (точка)
Метасимвол . Він використовується для представлення будь-якого символу, крім символу нового рядка. Наприклад, регулярний вираз /h.t/ відповідатиме словам «hat», «hot», «hit» і будь-якому іншому слову з трьох літер, яке починається на «h» і закінчується на «t».
\ (зворотна коса риска)
Зворотний слеш використовується для екранування спеціальних символів у регулярному виразі. Наприклад, якщо ви хочете шукати крапку в текстовому рядку, ви повинні екранувати її за допомогою зворотної скісної риски. Регулярний вираз /www\.google\.com/ відповідатиме текстовому рядку “www.google.com”.
\d (цифра)
Метасимвол \d використовується для пошуку будь-якої цифри від 0 до 9. Наприклад, регулярний вираз /\d+/ відповідатиме будь-якій одній чи більше цифрам у текстовому рядку.
\w (алфавітно-цифровий символ)
Метасимвол \w використовується для пошуку будь-якого алфавітно-цифрового символу (великі та малі літери, цифри та підкреслення). Наприклад, регулярний вираз /\w+/ відповідатиме будь-якому слову, що складається з одного чи кількох буквено-цифрових символів у текстовому рядку.
Це лише кілька прикладів метасимволів і спеціальних символів, які можна використовувати у регулярних виразах. Коли ви ближче познайомитеся з регулярними виразами в JavaScript, ви відкриєте для себе широкий вибір варіантів уточнення пошуку та маніпулювання текстом.
Класи та діапазони символів
Класи символів є ще одним ключовим елементом у регулярних виразах, які дозволяють нам шукати будь-який символ у певному наборі. У JavaScript ми можемо використовувати дужки [] щоб визначити клас символів. Давайте розглянемо кілька прикладів класів і діапазонів символів:
[aeiou]
Клас персонажа [aeiou] відповідатиме будь-якій голосній у текстовому рядку. Наприклад, регулярний вираз /[aeiou]/ відповідатиме "a", "e", "i", "o" або "u" в текстовому рядку.
[az]
Діапазон символів [a-z] відповідатиме будь-якій малій літері англійського алфавіту. Наприклад, регулярний вираз /[a-z]/ відповідатиме будь-якій малий регістр у текстовому рядку.
[0-9]
Діапазон символів [0-9] відповідатиме будь-якій цифрі від 0 до 9 у текстовому рядку. Наприклад, регулярний вираз /[0-9]/ відповідатиме будь-якому одноцифровому числу.
[А-За-Я]
Клас персонажа [A-Za-z] відповідатиме будь-якій великій або малій літері англійського алфавіту. Наприклад, регулярний вираз /[A-Za-z]/ відповідатиме будь-якій літері в текстовому рядку.
Класи та діапазони символів дозволяють нам визначати конкретні набори символів для пошуку в регулярному виразі. Використовуйте їх, щоб налаштувати пошук відповідно до ваших потреб і обмежень.
Квантори та повтори
Квантори та повтори є ключовими елементами регулярних виразів, які дозволяють нам вказати кількість входжень елемента в текстовий рядок. Давайте розглянемо деякі з найпоширеніших кванторів у JavaScript:
* (зірочка)
Квантор * вказує на те, що попередній елемент може з'являтися нуль або більше разів. Наприклад, регулярний вираз /a*/ відповідатиме нулю або більше літер у текстовому рядку.
+ (більше)
Квантор + вказує, що попередній елемент має з'явитися один або кілька разів. Наприклад, регулярний вираз /a+/ відповідатиме одній або декільком буквам "a" у текстовому рядку.
? (питання)
Квантор ? вказує на те, що попередній елемент може з'являтися нуль або один раз. Наприклад, регулярний вираз /colou?r/ відповідатиме як «колір», так і «колір».
{n} (рівно n разів)
Квантор {n} вказує, що попередній елемент повинен з'явитися рівно n разів. Наприклад, регулярний вираз /a{3}/ відповідатиме рівно трьом буквам "а" в текстовому рядку.
{n,} (принаймні n разів)
Квантор {n,} вказує на те, що попередній елемент повинен з'являтися принаймні n разів. Наприклад, регулярний вираз /a{2,}/ відповідатиме двом або більше літерам у текстовому рядку.
{n,m}
Квантор {n,m} вказує на те, що попередній елемент повинен з'являтися принаймні n разів і не більше m разів. Наприклад, регулярний вираз /a{2,4}/ відповідатиме двом, трьом або чотирьом "а" в текстовому рядку.
Це лише кілька прикладів кванторів, які можна використовувати у регулярних виразах. Квантори дозволяють нам визначати шаблони повторення в текстових пошуках і маніпуляціях, полегшуючи вилучення конкретної інформації з текстових рядків.
Якорі та межі слів
Прив’язки та межі слів — це елементи, які дозволяють нам вказати позицію збігу в текстовому рядку. Ці елементи особливо корисні, коли ми хочемо шукати цілі слова або переконатися, що збіг знаходиться на початку або в кінці рядка. Давайте розглянемо кілька прикладів прив’язок і меж слів:
\b (межа слова)
Обмеження слів \b відповідає межі між буквено-цифровим символом і неалфавітно-цифровим символом. Наприклад, регулярний вираз /\bjavascript\b/ відповідатиме лише слову «javascript» як повному слову, не відповідаючи довшим словам, які містять «javascript» як частину.
^ (початок рядка)
Персонаж ^ Використовується для позначення початку рядка в текстовому рядку. Наприклад, регулярний вираз /^hola/ відповідатиме слову "привіт" на початку кожного рядка в текстовому рядку.
$ (кінець рядка)
Персонаж $ Використовується для позначення кінця рядка в текстовому рядку. Наприклад, регулярний вираз /mundo$/ відповідатиме слову "світ" у кінці кожного рядка текстового рядка.
\A (початок тексту)
Персонаж \A Він використовується для позначення початку всього тексту в текстовому рядку, а не лише початку рядка. Наприклад, регулярний вираз /^\AHola/ відповідатиме слову «Привіт» на початку всього тексту.
\Z (кінець тексту)
Персонаж \Z використовується для позначення кінця всього тексту в текстовому рядку, а не лише кінця рядка. Наприклад, регулярний вираз /Mundo\Z/ відповідатиме слову «Світ» у кінці всього тексту.
Прив’язки та межі слів дозволяють нам шукати збіги в певних місцях текстового рядка, що може бути корисним у ситуаціях, коли ми хочемо переконатися, що збіг знаходиться в певній позиції.
Групи та захоплення
Групи та захоплення — це вдосконалені елементи регулярних виразів, які дозволяють групувати підвирази та фіксувати їх для подальшого використання. Давайте подивимося, як працюють групи та захоплення:
( ) (круглі дужки)
Дужки є Вони використовують для групування підвирази в регулярному виразі. Наприклад, регулярний вираз /(d{2})-(d{2})-(d{4})/ se використовується для пошуку дати у форматі «дд-мм-рррр. Групи ( ) Вони дозволяють нам отримувати значення дня, місяця та року окремо.
\1, \2, \3 (посилання на групи)
Посилання на групи використовуються для посилання на раніше захоплені групи в регулярному виразі. Наприклад, регулярний вираз /(\w+) \1/ відповідатиме будь-якому слову, за яким буде повторене те саме слово. Наприклад, «привіт привіт», «всесвітній світ» тощо.
?: (група без захоплення)
Символ ?: Він використовується для створення груп без захоплення. Ці групи використовуються, коли ми хочемо згрупувати підвирази, але не хочемо фіксувати результат. Наприклад, регулярний вираз /https?:\/\/(?:www\.)?google\.com/ відповідатиме як “http://www.google.com”, так і “https://google.com”, але захоплюватиме лише відповідну частину URL-адреси.
Групи та захоплення дозволяють нам структурувати та організовувати регулярні вирази більш ефективним та зручним для читання способом. Вони також надають можливість захоплювати певні значення для подальшого використання в наших програмах.
Корисні методи роботи з регулярними виразами
JavaScript надає кілька корисних методів для роботи з регулярними виразами. Ці методи дозволяють нам виконувати типові операції, такі як пошук, заміна та розділення текстових рядків за допомогою регулярних виразів. Давайте розглянемо деякі з цих методів:
матч ()
Метод match() Він використовується для пошуку всіх збігів регулярного виразу в текстовому рядку та повернення масиву з результатами. Наприклад:
const texto = "¡Hola, mundo!"; const regex = /o/g; const coincidencias = texto.match(regex); console.log(coincidencias); // ["o", "o"]
У цьому прикладі ми використали метод match() щоб знайти всі збіги регулярного виразу /o/g у текстовому рядку "Hello, world!" Метод match() повертає масив з усіма знайденими збігами.
replace ()
Метод replace() використовується для заміни збігів регулярного виразу в текстовому рядку на нове значення. Наприклад:
const texto = "¡Hola, mundo!"; const regex = /mundo/; const nuevoTexto = texto.replace(regex, "amigo"); console.log(nuevoTexto); // "¡Hola, amigo!"
У цьому прикладі ми використали метод replace() щоб замінити збіг регулярного виразу /mundo/ у текстовому рядку "Hello, world!" за слово «друг». Метод replace() повертає новий текстовий рядок із зробленими замінами.
розділити ()
Метод split() використовується для поділу текстового рядка на масив підрядків, використовуючи регулярний вираз як роздільник. Наприклад:
const texto = "Hola,mundo,amigo"; const regex = /,/g; const subcadenas = texto.split(regex); console.log(subcadenas); // ["Hola", "mundo", "amigo"]
У цьому прикладі ми використали метод split() щоб розділити текстовий рядок "Hello,world,friend" на масив підрядків за допомогою регулярного виразу /,/g як роздільник. Метод split() повертає масив із отриманими підрядками.
test ()
Метод test() Він використовується, щоб перевірити, чи є збіги регулярного виразу в текстовому рядку. Метод повертає true якщо є збіг і false інакше. Наприклад:
const texto = "Hola, mundo!"; const regex = /mundo/; const resultado = regex.test(texto); console.log(resultado); // true
У цьому прикладі ми використали метод test() щоб перевірити регулярний вираз /mundo/ містить будь-які збіги в текстовому рядку "Hello, world!". Метод test() Принесіть назад, поверніть true тому що є збіг обставин.
Це лише деякі з найпоширеніших методів роботи з регулярними виразами в JavaScript. Кожен із цих методів має власне призначення та може використовуватися відповідно до ваших конкретних потреб. Експериментуйте з ними та дізнайтеся, як вони можуть полегшити та пришвидшити вашу роботу з регулярними виразами.
Часті запитання
Що таке регулярні вирази в JavaScript? Регулярні вирази в JavaScript – це шаблони пошуку, які використовуються для пошуку та маніпулювання текстом у символьних рядках.
Як створити регулярні вирази в JavaScript? Регулярні вирази в JavaScript створюються за допомогою класу RegExp або за допомогою літералу /patrón/.
Яка різниця між модифікаторами та прапорцями в регулярних виразах? Модифікатори додаються в кінець регулярного виразу та змінюють його поведінку. Прапорці додаються після другої косої риски під час створення регулярного виразу за допомогою класу RegExp.
Чим відрізняється метод match() і метод test()? Метод match() Він використовується для пошуку всіх збігів регулярного виразу в текстовому рядку та повертає масив із результатами. Метод test() Він використовується, щоб перевірити, чи має регулярний вираз збіги в текстовому рядку, і повертає логічне значення.
Як я можу захопити певні значення за допомогою груп у регулярному виразі? Групи ( ) у регулярному виразі дозволяють захоплювати певні підвирази. Потім ви можете посилатися на ці групи за допомогою посилань \1, \2, І т.д.
Які методи я можу використовувати для роботи з регулярними виразами в JavaScript? Ось деякі корисні методи роботи з регулярними виразами в JavaScript match(), replace(), split() y test(). Кожен із цих методів має власне призначення та може використовуватися відповідно до ваших конкретних потреб.
Висновок
Регулярні вирази – це потужний інструмент для роботи з текстом у JavaScript. Розуміння основ , синтаксису та розширених методів регулярних виразів дозволить вам ефективно та точно шукати, замінювати та маніпулювати текстовими рядками. Від базового зіставлення до використання модифікаторів, груп та інших корисних методів – ви дізналися, як отримати максимальну віддачу від регулярних виразів у ваших проектах JavaScript.
Не забувайте тренуватися та експериментувати з різними шаблонами та випадками використання, щоб зміцнити своє розуміння та знайомство з регулярними виразами. Не соромтеся використовувати регулярні вирази для підвищення ефективності та якості вашого коду!