Жадные квантификаторы в регулярных выражениях JavaScript

В этом уроке вы узнаете о жадных квантификаторах в регулярных выражениях JavaScript и о том, как они работают «изнутри».

Все квантификаторы по умолчанию работают в «жадном» режиме. Это означает, что квантификаторы будут максимально соответствовать своим предыдущим элементам.

В следующем примере показано, как работают жадные квантификаторы.

Пример

Предположим, у вас есть строка HTML, представляющая элемент кнопки:

const button = '<button type="submit" class="btn">Send</button>'

И вы хотите сопоставить тексты, заключенные в двойные кавычки( "" ), такие как submit и btn.

Для этого вы используете двойные кавычки(«), класс символов точка( . ) и квантификатор( + ) для построения следующего шаблона:

/".+"/g

Этот шаблон означает, что:

• " начинается с "
• . соответствует любому символу, кроме новой строки
• + соответствует предыдущему символу один или несколько раз
• " заканчивается на "
• Флаг g возвращает все совпадения.

Далее используется метод match() для сопоставления строки s с шаблоном:

const s = '<button type="submit" class="btn">Send</button>'
const pattern = /".+"/g;

const result = s.match(pattern)
console.log(result);

Выход:

['"submit" class="btn"']

Он возвращает '"submit" class="btn"' вместо submit ” и btn.

Причина в том, что в жадном режиме квантификатор( + ) пытается максимально соответствовать предыдущему элементу( ". ).

Как работают

Во-первых, механизм регулярных выражений начинает сопоставление с первого символа в строке s.

Затем, поскольку первый символ < не соответствует кавычке( " ), механизм регулярных выражений продолжает сопоставлять следующие символы, пока не найдет первую кавычку( " ):

Затем механизм регулярных выражений сопоставляет строку со следующим правилом .+ в регулярном выражении.

Поскольку правило .+ соответствует одному или нескольким символам, механизм регулярных выражений сопоставляет символы до тех пор, пока не встретит конец строки:

После этого механизм регулярных выражений проверяет последнее правило в регулярном выражении, которым является кавычка(«). Однако больше нет подходящего символа, потому что он уже достиг конца строки. Это означает, что механизм регулярных выражений слишком жаден, зайдя слишком далеко.

Наконец, механизм регулярных выражений возвращается с конца строки, чтобы найти кавычку(«). Этот шаг часто называют возвратом.

В результате совпадением является следующая подстрока, а это не то, что вы могли ожидать:

"submit" class="btn"

Чтобы решить эту проблему, вам нужно указать квантификатору( + ) использовать нежадный(или ленивый) режим вместо жадного. Для этого вы добавляете вопросительный знак( ? ) после квантора следующим образом:

/".+?"/g

Следующий скрипт возвращает ожидаемый результат:

const s = '<button type="submit" class="btn">Send</button>'
const pattern = /".+?"/g;

const result = s.match(pattern)
console.log(result);

Выход:

['"submit"', '"btn"']

Заключение

• По умолчанию квантификаторы используют жадный режим.
• Жадные квантификаторы максимально соответствуют своим предыдущим элементам.