JS об'єкт RegExp

Вступ до об'єкта RegExp

Об'єкт RegExp в JavaScript є вбудованим об'єктом для роботи з регулярними виразами. Регулярні вирази — це потужний інструмент для обробки рядків. Вони дозволяють вам знаходити підстроки в тексті, заміняти їх, розділяти рядки на фрагменти та виконувати інші дії, пов'язані з обробкою тексту.

Спершу давайте розглянемо два основні способи створення об'єкта RegExp:

Літеральна нотація: Цей спосіб виглядає наступним чином: /pattern/flags. Це найпростіший і найбільш зрозумілий спосіб, ідеальний для статичних регулярних виразів.

const re1 = /ab+c/;

У цьому прикладі re1 шукає будь-які входження "a", за якими слідує одна або кілька "b" і "c" на кінці.

Конструктор: Якщо вам потрібно створити регулярний вираз з динамічної стрічки, то ви можете використовувати конструктор new RegExp().

const pattern = "ab+c";
const re2 = new RegExp(pattern);

У цьому прикладі ми створюємо той самий регулярний вираз, але з використанням конструктора. Змінна pattern може бути отримана динамічно, наприклад, від користувача.

Важливість компіляції

Перед тим, як використовувати регулярні вирази, їх потрібно "скомпілювати". Це означає, що рушій JavaScript перетворює вираз в оптимізовану внутрішню структуру. У випадку літеральної нотації компіляція відбувається на етапі парсинга коду. У випадку конструктора — під час виконання коду. Останній варіант може бути трохи повільнішим, якщо вам постійно потрібно створювати нові регулярні вирази.

Обидва методи дозволяють вам використовувати "прапорці" для керування поведінкою регулярного виразу. Наприклад, прапорець i робить пошук незалежним від регістру:

const re3 = /ab+c/i;
const re4 = new RegExp("ab+c", "i");

У цих прикладах re3 і re4 будуть знаходити "AbC", "aBc", "ABC" і так далі.

Перевірка на збіг

Однією з основних операцій, які можна виконувати з регулярними виразами, є пошук збігів в рядку. Для цього використовується метод test():

const re5 = /hello/;
console.log(re5.test("hello world")); // Виведе "true", бо "hello" є в рядку "hello world".

У цьому прикладі метод test() поверне true, оскільки підстрока "hello" дійсно присутня в рядку "hello world".

правити

Працюємо з прапорцями

Прапорці в регулярних виразах дозволяють модифікувати поведінку шаблону. Наприклад:

• i - робить пошук нечутливим до регістра.
• g - дозволяє здійснювати глобальний пошук та знаходити всі входження шаблону в рядку.

При використанні конструктора, прапорці вказуються у другому параметрі.

Особливість екранування символів в регулярних виразах:

Коли ви використовуєте конструктор для створення регулярного виразу з рядка, вам потрібно додатково екранувати деякі символи.

const re1 = /\w+/;
const re2 = new RegExp("\\w+");

В обох прикладах шукається одне або декілька алфавітно-цифрових символів, але у другому прикладі потрібно використовувати подвійне екранування, оскільки ми використовуємо рядковий літерал.

Особливості обробки регулярних виразів:

Навіть якщо щось не є інстанцією RegExp, деякі вбудовані методи можуть сприймати його як регулярний вираз, залежно від властивостей. Наприклад, метод String.prototype.endsWith() видасть помилку, якщо йому передати регулярний вираз, адже він призначений лише для роботи з рядками.

"foobar".endsWith(/bar/); // TypeError

Однак, якщо ви модифікуєте властивість Symbol.match регулярного виразу, ви можете "обманути" цю перевірку.

const re = /bar/g;
re[Symbol.match] = false;
"/bar/g".endsWith(re); // true

У цьому прикладі ми змінили поведінку регулярного виразу, щоб він сприймався не як регулярний вираз в деяких контекстах, дозволяючи йому працювати з методом endsWith().

правити

Порада

Існує безліч онлайн-інструментів для тестування регулярних виразів (наприклад, regex101.com). Ці інструменти не тільки допомагають перевірити ваш регулярний вираз на відповідність, але й надають пояснення кожного компоненту виразу.

автор: Bond правити

Нотатка

Якщо вам потрібно включити спеціальний символ як частину вашого пошукового патерну (наприклад, ., *, ?, +), не забудьте його екранувати, використовуючи зворотний слеш (\). Наприклад, якщо вам потрібно знайти літеральну крапку в рядку, ваш вираз повинен виглядати так: /\./.

автор: Bond правити

Нотатка

Коли ви вперше знайомитеся з регулярними виразами, може здатися, що це дуже складно. Почніть з простих патернів і поступово додавайте складність. Наприклад, спробуйте спочатку знайти всі голосні літери в рядку, а потім додати умови для великих і малих літер.

Регулярні вирази є потужним інструментом в арсеналі кожного розробника. І хоча на початку вони можуть здатися складними, з часом ви оціните їхню універсальність та ефективність.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let obj = new RegExp(pattern);

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	5	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const swearWords = /badword|anotherbadword/gi;
const inputText = "This is a text with a badword in it.";
const sanitizedText = inputText.replace(swearWords, "***");

console.log(sanitizedText); // Output: "This is a text with a *** in it."

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const email = "[email protected]";

if (emailPattern.test(email)) {
  console.log("Електронна пошта вірна");
} else {
  console.log("Електронна пошта не вірна");
}

const hashtagPattern = /#\w+/g;
const text = "Я вивчаю #JavaScript Він крутий! #coding";
const hashtags = text.match(hashtagPattern);

console.log(hashtags); // Результат: ["#JavaScript", "#coding"]