прокручивать теги html в строке и добавлять внутренний текст в массив

У меня есть некоторый HTML-контент, сохраненный в виде строки.

Я хотел бы перебрать каждый из тегов заголовка в этой строке и получить его внутренний текст.

let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

const innerHTMLarr = str.match(/<h1>(.*?)<\/h1>/g).map(x => x);

console.log(innerHTMLarr)

Массив возвращается со всем текстом заголовка, как мне получить только внутренний текст?

Не против использовать jQuery.


javascript regex
person totalnoob    schedule 15.05.2018    source источник
comment
пожалуйста, обратитесь к этому stackoverflow.com/questions/10585029 /   -  person Kalleshwar Kalshetty    schedule 15.05.2018
comment
Возможный дубликат глобального сопоставления Javascript с группами захвата   -  person NineBerry    schedule 15.05.2018
comment
См. также Как вы получаете доступ к совпадающим группы в регулярном выражении JavaScript?   -  person NineBerry    schedule 15.05.2018

Ответы (4)


arrow_upward
5
arrow_downward

Попробуйте /<\/?h1>/g внутри map() заменить все вхождения <h1> и <\h1> на '', как показано ниже:

let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

const innerHTMLarr = str.match(/<h1>(.*?)<\/h1>/g).map(val => {
   return val.replace(/<\/?h1>/g,'');
});
console.log(innerHTMLarr)

person Mamun    schedule 15.05.2018
comment
›результат не определен - person Cid; 15.05.2018
comment
Благодарю. можете ли вы уточнить, что return val.replace(/‹\/?h1›/g,''); делается? - person totalnoob; 15.05.2018
comment
Заменяет ‹h1› и ‹/h1› пустой строкой. - person Cid; 15.05.2018
comment
@totalnoob, я добавил немного объяснений в ответ .... надеюсь, что это прояснит ваш вопрос .... спасибо. - person Mamun; 15.05.2018

arrow_upward
2
arrow_downward

Используя jQuery, вы можете сделать это следующим образом:

    let str = '<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>';
    html = $.parseHTML( str );
    innerHTMLarr = [], k=0;
    $.each( html, function( i, el ) {
    	if(el.nodeName.startsWith('H')) 
        	innerHTMLarr[k++] = el.innerHTML;
    });    
    console.log(innerHTMLarr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

person S Agarwal    schedule 15.05.2018
comment
А как насчет $("H1").each(function() { /* some code */ }); ? - person Cid; 15.05.2018

arrow_upward
2
arrow_downward

Вы можете использовать exec() в цикле, пока не будет найдено совпадение.

РЕДАКТИРОВАТЬ: сокращенный код

let pattern = /<h1>(.*?)<\/h1>/g;
let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

let match;

while (match = pattern.exec(str))
    console.log(match[1]);

person Cid    schedule 15.05.2018

arrow_upward
1
arrow_downward

Применение решения из глобального сопоставления JavaScript с группами захвата:

let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

let regexpr = /<h1>(.*?)<\/h1>/g;

let match = regexpr.exec(str);

while(match !== null) {
    console.log(match[1]);
    match = regexpr.exec(str);
}

person NineBerry    schedule 15.05.2018