JS Распарсить строку и получить все заголовки?

Question

Есть вот такой простой пример.

let content = '<h1 class=\"sr-only\">TEST1<\/h1><h1 class=\"cookie-banner__headline\">\nCookie-Settings\n<\/h1>';
let regex = /<h1[^>]*>(.*?)<\/h1>/g;

let res = [];
let match;

while ((match = regex.exec(content)) !== null) {
    res.push(match[1]);
}

console.log(res);

Задача, как в переменную записать массив из всех найденных текстов-заголовков ? Необходимо, что б все, что содержится между тегами <h1> </h1> было элементами массива res. (* Переменная content может содержать любые атрибуты)

Answer 1

Перестаньте уже наконец парсить HTML регулярками!!!

Простое решение:

let content = '<h1 class=\"sr-only\">TEST1<\/h1><h1 class=\"cookie-banner__headline\">\nCookie-Settings\n<\/h1>';

let parser = new DOMParser();
let doc = parser.parseFromString(content, "text/html");
let headers = doc.querySelectorAll('h1');

headers.forEach((header) => {
  console.log(header.outerText.trim());
})

Answer 2

Проблема была в вашем регулярном выражении, а именно в символе новой строки. Чтобы исправить эту проблему, нужно использовать флаг /gs.

флаг s, изменяет поведение точки (.). Обычно точка в регулярном выражении соответствует любому символу, кроме символа новой строки. Однако при добавлении флага s включается режим "однострочного" сопоставления, где точка теперь будет соответствовать любым символам, включая символ новой строки. Таким образом, с использованием /gs регулярное выражение успешно находит теги , даже если они содержат символы новой строки (\n).

let content = '<h1 class=\"sr-only\">TEST1<\/h1><h1 class=\"cookie-banner__headline\">\nCookie-Settings\n<\/h1>';


let regex = /<h1[^>]*>(.*?)<\/h1>/gs; 
let res = []; 
let match;

while ((match = regex.exec(content)) !== null) {
  res.push(match[1].trim()); 
}

console.log(res);

БЛОГ НА HUSL

JS Распарсить строку и получить все заголовки?

Ответы (2 шт):