Как из callbaсk-html взять нужные теги в JS?

262

20 мая 2018, 15:40

В коллбеке приходит HTML.

<p><font class="errortext">Заполните поле "Ф.И.О."</font></p>
<p><font class="errortext">Заполните поле "E-Mail"</font></p>
<p><font class="errortext">Заполните поле "Телефон"</font></p>
...
...
...

Нужно вырезать и сохранить в виде массива все теги с классом "errortext".

Типа функции preg_match_all в PHP.

Как это можно сделать в JS?

Answer 1

Регулярки тут не нужны. Разберите html, как html:

let html = ` 
<p><font class="errortext">Заполните поле "Ф.И.О."</font></p> 
<p><font class="errortext">Заполните поле "E-Mail"</font></p> 
<p><font class="errortext">Заполните поле "Телефон"</font></p> 
`; 
 
let dom = document.createElement('html'); 
dom.innerHTML = html; 
let errors = Array.from(dom.querySelectorAll('.errortext')) 
  .map(el => el.innerText); 
 
console.log(errors)

Таким образом, Вы во первых, избавляетесь от сложностей разбора html, во вторых у Вас есть полноценные DOM-элементы, которые, при необходимости, можно переносить/клонировать в документ.

Answer 2

DOMParser в помощь:

const htmlStr = `<p><font class="errortext">Заполните поле "Ф.И.О."</font></p> 
<p><font class="errortext">Заполните поле "E-Mail"</font></p> 
<p><font class="errortext">Заполните поле "Телефон"</font></p>`;  
 
const parsed = (new DOMParser()).parseFromString(htmlStr, 'text/html');   // <-- магия вот тут 
let elemArray = Array.from(parsed.querySelectorAll('.errortext'));  
 
elemArray.forEach(el => console.log(el.outerHTML));

Answer 3

В соседних ответах могут возникнуть проблемы с невалидными фрагментами html.
Например, c частями таблиц - ячейками без строк и т.п.
В новых браузерах можно использовать элемент <template> для подобных фрагментов:

function parseHTML(html, context) {
    var t = (context || document).createElement('template');
        t.innerHTML = html;
    return t.content.cloneNode(true);
}

Для более широкой поддержки браузеров можно использовать наработки jQuery в этой области: gist @Munawwar

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ошибка: play() can only be initiated by a user gesture (мобильный Chrome)

Делаем приложение через Ionic/Cordova; компилю на платформу browser; через библиотeку медиа пытаюсь запустить мелодию по событию (пришел заказ от клиента)

276

javascript