JavaScript | Как получить содержимое заголовка H1 из строки? — efim360.ru

JavaScript | Как получить содержимое заголовка H1 из строки?

Предположим, что у нас есть строка разметки 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:

/<h1>(.*?)<\/h1>/g.exec("111<h1>Заголовок</h1>222<h1>Молоко</h1>333")
Получили первый заголовок h1 из HTML-разметки методом exec() - JavaScript
Получили первый заголовок h1 из HTML-разметки методом exec() - JavaScript

В этом случае мы получили только первый заголовок H1, которые встретили в разметке HTML-страницы.

Чтобы получить массив из всех возможных заголовков H1 нужно воспользоваться методом match().

 

Способ № 2 - Через метод [Symbol.matchAll]()

[.../<h1>(.*?)<\/h1>/g[Symbol.matchAll]("111<h1>Заголовок</h1>222<h1>Молоко</h1>333")].map(i=>i[1])

Получаем массив из всех возможных значений заголовков H1.

Получили два HTML-заголовка h1 - JavaScript
Получили два HTML-заголовка h1 - JavaScript

 

Способ № 3 - Через метод replace()

Метод replace() создан, чтобы заменять значения строк, поэтому с его помощью можно получить только один заголовок.

"111<h1>Заголовок</h1>222<h1>Молоко</h1>333".replace(/.*?<h1>(.*?)<\/h1>.*/, '$1')

Пример работы:

Метод replace() вернул первый HTML-заголовок h1 - JavaScript
Метод replace() вернул первый HTML-заголовок h1 - JavaScript

 

Информационные ссылки

Стандарт 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