Предположим, что у нас есть строка разметки HTML-документа и теперь нам нужно получить строковое значение, которое находится между открывающим и закрывающим тегами: <h1> и </h1>
Как это сделать?
Нам помогут регулярные выражения и их шаблоны. Для краткости я приведу строку:
var stroka = "bla bla bla <h1>Нужный заголовок</h1> tro lo lo"
Способ № 1 — Через метод exec()
Пишем регулярку:
/<h1>(.*?)<\/h1>/.exec(stroka)[1] "Нужный заголовок"
В качестве границ шаблона регулярного выражения мы используем дизъюнкции строковых представлений тегов — <h1><\/h1>.
Закрывающий тег </h1> мы вынуждены модифицировать (экранировать) в <\/h1> т. к. в противном случаем косая черта будет расценена как управляющий символ границы шаблона самого регулярного выражения.
Внутри круглых скобок ( ) у нас помещаются АТОМ в виде ТОЧКИ и квантификатор в виде префикса квантификатора ЗВЁЗДОЧКИ с ВОПРОСОМ. ТОЧКА обозначает один любой символ из веб пространства. ЗВЁЗДОЧКА символизирует сопоставление символа АТОМА от нуля до бесконечности возможных повторений в строке.
Символ ВОПРОСА ограничивает сопоставления до поиска наименьшей по длине возможной последовательности между тегами, чтобы избежать ошибочного результата если в строке будет несколько заголовков H1.
Пример работы с несколькими H1:
/<h1>(.*?)<\/h1>/g.exec("111<h1>Заголовок</h1>222<h1>Молоко</h1>333")
В этом случае мы получили только первый заголовок H1, которые встретили в разметке HTML-страницы.
Чтобы получить массив из всех возможных заголовков H1 нужно воспользоваться методом match().
Способ № 2 — Через метод [Symbol.matchAll]()
[…/<h1>(.*?)<\/h1>/g[Symbol.matchAll](«111<h1>Заголовок</h1>222<h1>Молоко</h1>333»)].map(i=>i[1])
Получаем массив из всех возможных значений заголовков H1.
Способ № 3 — Через метод replace()
Метод replace() создан, чтобы заменять значения строк, поэтому с его помощью можно получить только один заголовок.
«111<h1>Заголовок</h1>222<h1>Молоко</h1>333».replace(/.*?<h1>(.*?)<\/h1>.*/, ‘$1’)
Пример работы:
Информационные ссылки
Стандарт ECMAScript — https://tc39.es/ecma262/multipage/
Стандарт ECMAScript — Раздел «22.2 RegExp (Regular Expression) Objects» — https://tc39.es/ecma262/multipage/text-processing.html#sec-regexp-regular-expression-objects
