12 жовтня 2022 р.

Якорі: початок рядка ^ і кінець $

Символи каретки ^ і долара $ мають особливе значення в регулярному виразі. Їх називають “якорі”.

Каретка ^ збігається з початком тексту, а долар $ з кінцем.

Наприклад, перевіримо, чи текст починається з Марійка:

let str1 = "Марійка мала маленьке ягня";
alert( /^Марійка/.test(str1) ); // true

Шаблон ^Марійка означає: “початок рядка, а потім Марійка”.

Відповідно, ми можемо протестувати чи закінчується рядок з сніг використавши сніг$

let str1 = "ця шерсть була білою як сніг";
alert( /сніг$/.test(str1) ); // true

Конкретно в цих випадках ми можемо використати методи рядка startsWith/endsWith. Для складніших тестів слід використовувати регулярні вирази.

Перевірка на повний збіг

Обидва якорі разом ^...$ часто використовуються для перевірки того, чи рядок повністю відповідає шаблону. Наприклад, щоб перевірити, чи введені користувачем дані мають правильний формат.

Перевіримо, чи є рядок часом у форматі: 12:34. Тобто: дві цифри, потім двокрапка, а потім ще дві цифри.

У мові регулярних виразів це виглядає так \d\d:\d\d:

let goodInput = "12:34";
let badInput = "12:345";

let regexp = /^\d\d:\d\d$/;
alert( regexp.test(goodInput) ); // true
alert( regexp.test(badInput) ); // false

Тут збіг для \d\d:\d\d має починатися точно після початку тексту ^, а кінцевий $ має йти відразу в слід.

Весь рядок має бути саме в цьому форматі. Якщо є будь-яке відхилення або додатковий символ, результатом буде false.

Якір поводиться інакше, якщо присутній прапорець m. Розглянемо це в наступній статті.

У якорів “нульова ширина”

Якорі ^ та $ – це перевірки. В них нульова ширина.

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

Завдання

Який рядок буде відповідати шаблону ^$?

Порожній рядок є єдиним збігом: він починається і негайно закінчується.

Задача ще раз доводить що якорі не являються символами, вони є тестами.

Рядок порожній "". Механізм спочатку відповідає ^ (початок введення), так, він там, а потім одразу кінцевий $, він також є тут. Отже, збіг є.

Навчальна карта

Коментарі

прочитайте це, перш ніж коментувати…
  • Якщо у вас є пропозиції, щодо покращення підручника, будь ласка, створіть обговорення на GitHub або одразу створіть запит на злиття зі змінами.
  • Якщо ви не можете зрозуміти щось у статті, спробуйте покращити її, будь ласка.
  • Щоб вставити код, використовуйте тег <code>, для кількох рядків – обгорніть їх тегом <pre>, для понад 10 рядків – використовуйте пісочницю (plnkr, jsbin, codepen…)