Пошук уроків, статей та іншого контенту
Розберете синтаксис регулярних виразів у JavaScript, літерали RegExp і створення шаблонів через конструктор.
Регулярний вираз — це шаблон для пошуку та перевірки тексту. За його допомогою можна:
знайти слово або послідовність символів;
перевірити формат рядка;
замінити частину тексту;
розділити рядок на частини;
знайти всі збіги з певним шаблоном.
У JavaScript регулярні вирази представлені об’єктами RegExp.
Наприклад, вираз /cat/ шукає послідовність символів cat:
const text = "A cat is sleeping";
const pattern = /cat/;
console.log(pattern.test(text)); // trueМетод test() повертає:
true, якщо шаблон знайдено;
false, якщо збігів немає.
Найкоротший спосіб створити регулярний вираз — використати спеціальний синтаксис, який називають літералом регулярного виразу:
const pattern = /javascript/;Літерал записується між двома символами /:
const pattern = /шаблон/прапорці;Наприклад:
const pattern = /hello/i;У цьому прикладі:
hello — шаблон;
i — прапорець, який ігнорує регістр.
Тому вираз знайде всі такі варіанти:
const pattern = /hello/i;
console.log(pattern.test("hello")); // true
console.log(pattern.test("Hello")); // true
console.log(pattern.test("HELLO")); // trueБез прапорця i регістр має значення:
const pattern = /hello/;
console.log(pattern.test("hello")); // true
console.log(pattern.test("Hello")); // falseРегулярний вираз можна створити за допомогою конструктора RegExp:
const pattern = new RegExp("javascript");Такий об’єкт працює так само, як і регулярний вираз-літерал:
const pattern = new RegExp("javascript");
console.log(pattern.test("I learn javascript")); // trueПрапорці передаються другим аргументом конструктора:
const pattern = new RegExp("hello", "i");
console.log(pattern.test("Hello")); // trueЛітерал зручний, коли шаблон відомий заздалегідь:
const pattern = /^\d+$/;Конструктор корисний, коли шаблон формується під час виконання програми:
const word = "JavaScript";
const pattern = new RegExp(word, "i");
console.log(pattern.test("I like javascript")); // trueЯкщо значення для шаблону походить від користувача або містить спеціальні символи, його потрібно правильно екранувати. Це важливо, тому що символи регулярних виразів можуть мати спеціальне значення.
Літери та цифри зазвичай відповідають самим собі:
const pattern = /cat/;
console.log(pattern.test("cat")); // true
console.log(pattern.test("dog")); // false
console.log(pattern.test("concatenate")); // trueЗа замовчуванням регулярний вираз шукає збіг у будь-якій частині рядка.
Крапка . відповідає майже будь-якому одному символу, крім символу нового рядка:
const pattern = /c.t/;
console.log(pattern.test("cat")); // true
console.log(pattern.test("cut")); // true
console.log(pattern.test("c7t")); // true
console.log(pattern.test("ct")); // falseЩоб шукати саме крапку, її потрібно екранувати:
const pattern = /\./;
console.log(pattern.test("example.com")); // true
console.log(pattern.test("example-com")); // falseСимвольний клас записують у квадратних дужках []. Він відповідає одному символу з перелічених:
const pattern = /[aeiou]/;
console.log(pattern.test("cat")); // true
console.log(pattern.test("dog")); // true
console.log(pattern.test("sky")); // falseВираз /[abc]/ означає: знайти один символ a, b або c.
Можна вказувати діапазони:
const lowercaseLetter = /[a-z]/;
const digit = /[0-9]/;
console.log(lowercaseLetter.test("m")); // true
console.log(digit.test("7")); // trueЩоб заперечити клас, використовуйте ^ одразу після відкривної квадратної дужки:
const notDigit = /[^0-9]/;
console.log(notDigit.test("a")); // true
console.log(notDigit.test("5")); // falseJavaScript має готові скорочення для поширених класів:
\d — цифра, аналог [0-9];
\D — не цифра;
\w — латинська літера, цифра або символ _;
\W — символ, який не належить до \w;
\s — пробільний символ;
\S — символ, який не є пробільним.
Приклад:
const phonePart = /\d\d\d/;
console.log(phonePart.test("123")); // true
console.log(phonePart.test("12a")); // falseЗверніть увагу: \w у JavaScript орієнтований переважно на ASCII-символи, тому для довільних українських літер він не є універсальним рішенням.
Квантифікатори визначають, скільки разів символ або група можуть повторюватися.
* — нуль або більше разів;
+ — один або більше разів;
? — нуль або один раз;
{n} — рівно n разів;
{n,} — не менше n разів;
{n,m} — від n до m разів.
Приклади:
console.log(/go*/.test("g")); // true
console.log(/go*/.test("goooo")); // true
console.log(/go+/.test("g")); // false
console.log(/go+/.test("go")); // true
console.log(/\d{4}/.test("2025")); // true
console.log(/\d{4}/.test("25")); // falseВираз /go*/ відповідає g, go, goo і так далі, тому що * дозволяє нуль повторень o.
Вираз /go+/ вимагає щонайменше одну o.
Спеціальні символи:
^ — початок рядка;
$ — кінець рядка.
Наприклад, вираз /^\d+$/ перевіряє, чи весь рядок складається лише з цифр:
const onlyDigits = /^\d+$/;
console.log(onlyDigits.test("12345")); // true
console.log(onlyDigits.test("12a45")); // false
console.log(onlyDigits.test("number: 123")); // falseБез ^ і $ вираз міг би знайти лише частину рядка:
const digits = /\d+/;
console.log(digits.test("number: 123")); // trueТут збігом є фрагмент 123, хоча весь рядок не складається з цифр.
Круглі дужки () об’єднують частину шаблону в групу:
const pattern = /(ha)+/;
console.log(pattern.test("ha")); // true
console.log(pattern.test("hahaha")); // trueКвантифікатор + застосовується до всієї групи ha.
Групи також використовують для альтернатив:
const pattern = /cat|dog/;
console.log(pattern.test("I have a cat")); // true
console.log(pattern.test("I have a dog")); // true
console.log(pattern.test("I have a bird")); // falseСимвол | означає «або».
Щоб обмежити альтернативу групою, використовуйте дужки:
const pattern = /^(cat|dog)$/;
console.log(pattern.test("cat")); // true
console.log(pattern.test("dog")); // true
console.log(pattern.test("catalog")); // falseБез групи вираз ^cat|dog$ мав би інший зміст: рядок мав би починатися з cat або закінчуватися на dog.
Деякі символи мають спеціальне значення в регулярних виразах:
. * + ? ^ $ { } [ ] ( ) | \Якщо потрібно шукати такий символ буквально, перед ним ставлять зворотну скісну риску \.
Наприклад, пошук ціни в доларах:
const price = /^\$\d+$/;
console.log(price.test("$25")); // true
console.log(price.test("25")); // falseТут \$ означає буквальний символ $, а \d+ — одну або більше цифр.
Прапорці змінюють поведінку регулярного виразу.
i — ігнорування регіструconst pattern = /javascript/i;
console.log(pattern.test("JavaScript")); // true
console.log(pattern.test("JAVASCRIPT")); // trueg — глобальний пошукПрапорець g дає змогу знайти всі збіги, а не лише перший:
const text = "red, green, blue";
const colors = /[a-z]+/g;
console.log(text.match(colors)); // [ "red", "green", "blue" ]m — багаторядковий режимПрапорець m змінює поведінку ^ і $. Вони починають відповідати початку та кінцю кожного рядка, а не лише всього тексту:
const text = "first line\nsecond line";
const pattern = /^second/m;
console.log(pattern.test(text)); // trueПрапорці можна комбінувати:
const pattern = /javascript/gi;Цей вираз:
ігнорує регістр завдяки i;
шукає всі збіги завдяки g.
test()Метод test() перевіряє наявність збігу:
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailPattern.test("user@example.com")); // true
console.log(emailPattern.test("invalid-email")); // falseЦей шаблон є спрощеною перевіркою формату електронної адреси. Для складних сценаріїв однієї регулярної перевірки може бути недостатньо.
exec()Метод exec() повертає інформацію про перший знайдений збіг або null:
const pattern = /JavaScript/;
const result = pattern.exec("I learn JavaScript");
console.log(result[0]); // JavaScript
console.log(result.index); // 8Якщо збігу немає:
const result = /Python/.exec("I learn JavaScript");
console.log(result); // nullmatch()Метод match() належить рядку. Він повертає збіг або всі збіги, якщо використано прапорець g:
const text = "JavaScript is great. JavaScript is popular.";
console.log(text.match(/JavaScript/));
// [ "JavaScript" ]
console.log(text.match(/JavaScript/g));
// [ "JavaScript", "JavaScript" ]replace()Метод replace() замінює знайдений текст:
const text = "I like cats and cats like me";
const result = text.replace(/cats/g, "dogs");
console.log(result); // I like dogs and dogs like meБез прапорця g буде замінено лише перше входження:
const text = "one one one";
const result = text.replace(/one/, "two");
console.log(result); // two one onesplit()Рядок можна розділити за регулярним виразом:
const text = "apple, banana; orange";
const fruits = text.split(/[,;]\s*/);
console.log(fruits); // [ "apple", "banana", "orange" ]Шаблон [,;]\s* означає:
кому або крапку з комою;
після них — нуль або більше пробілів.
Коли частина шаблону зберігається у змінній, використовуйте конструктор RegExp:
const username = "olena";
const pattern = new RegExp(`^${username}$`, "i");
console.log(pattern.test("Olena")); // true
console.log(pattern.test("Olena123")); // falseПід час створення рядка для конструктора потрібно пам’ятати про подвійне екранування.
У літералі регулярного виразу для пошуку цифри записують:
/\d+/У рядку для конструктора зворотну скісну риску потрібно екранувати:
new RegExp("\\d+");Повний приклад:
const literalPattern = /^\d+$/;
const constructorPattern = new RegExp("^\\d+$");
console.log(literalPattern.test("123")); // true
console.log(constructorPattern.test("123")); // trueУ рядку JavaScript послідовність \\ перетворюється на одну \, і вже потім регулярний вираз отримує \d.
Створімо функцію, яка перевіряє простий формат імені користувача:
від 3 до 16 символів;
дозволені латинські літери, цифри та символ _;
інші символи заборонені.
function isValidUsername(username) {
const pattern = /^[a-zA-Z0-9_]{3,16}$/;
return pattern.test(username);
}
console.log(isValidUsername("olena_25")); // true
console.log(isValidUsername("ab")); // false
console.log(isValidUsername("user name")); // false
console.log(isValidUsername("користувач")); // falseРозберімо шаблон:
^ початок рядка
[a-zA-Z0-9_] латинські літери, цифри або _
{3,16} від 3 до 16 символів
$ кінець рядкаЗавдяки ^ і $ перевіряється весь рядок, а не його окрема частина.
Об’єкт регулярного виразу має властивості source і flags:
const pattern = /hello/gi;
console.log(pattern.source); // hello
console.log(pattern.flags); // giТакож можна перевірити окремі прапорці:
const pattern = /hello/gi;
console.log(pattern.global); // true
console.log(pattern.ignoreCase); // true
console.log(pattern.multiline); // falseЦі властивості доступні лише для читання.
Вираз:
const pattern = /\d+/;
console.log(pattern.test("abc123")); // trueзнаходить цифри всередині рядка. Якщо потрібно перевірити, що весь рядок складається лише з цифр, використовуйте межі:
const pattern = /^\d+$/;
console.log(pattern.test("abc123")); // false
console.log(pattern.test("123")); // truegБез g метод match() повертає лише перший збіг:
const text = "cat cat cat";
console.log(text.match(/cat/)); // [ "cat" ]
console.log(text.match(/cat/g)); // [ "cat", "cat", "cat" ]Це неправильний варіант:
const pattern = new RegExp("\d+");У рядку зворотна скісна риска може бути оброблена ще до того, як шаблон потрапить у RegExp.
Правильний варіант:
const pattern = new RegExp("\\d+");
console.log(pattern.test("123")); // trueРегулярний вираз має розв’язувати конкретну задачу. Надто складний шаблон:
важко читати;
важко тестувати;
легко зламати під час змін.
Для складної перевірки часто краще розділити логіку на кілька простих перевірок.
* і +/a*/.test(""); // true
/a+/.test(""); // false* допускає нуль повторень, а + вимагає щонайменше одне повторення.
Регулярний вираз — це шаблон для пошуку та перевірки тексту.
У JavaScript регулярні вирази створюють літералом /шаблон/прапорці.
Для динамічних шаблонів використовують new RegExp(pattern, flags).
Символи ^ і $ позначають початок і кінець рядка.
Квадратні дужки [] створюють символьний клас.
Квантифікатори *, +, ?, {n,m} задають кількість повторень.
Символ | позначає альтернативу.
Спеціальні символи потрібно екранувати за допомогою \.
Прапорець i ігнорує регістр, g шукає всі збіги, а m вмикає багаторядковий режим.
Для перевірки зручно використовувати test(), для пошуку — match() і exec(), для заміни — replace().