I have some HTML content saved as a string.

I'd like to loop through each of the header tags in that string and get its inner text.

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)

I have some HTML content saved as a string.

I'd like to loop through each of the header tags in that string and get its inner text.

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)

The array es back with the whole header text, how do I get just the inner text?

Wouldn't mind using jQuery.

• javascript
• regex

• 1 please refere this stackoverflow./questions/10585029/… – Kalleshwar Kalshetty Commented May 15, 2018 at 9:33
• Possible duplicate of Javascript global match with capturing groups – NineBerry Commented May 15, 2018 at 9:39
• See also How do you access the matched groups in a JavaScript regular expression? – NineBerry Commented May 15, 2018 at 9:50

4 Answers 4

Try /<\/?h1>/g inside map() to replace all occurrences of <h1> and <\h1> with '' like the following:

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)

Using jQuery, you can do it the following way:

    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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can use exec() in a loop until there is no match.

EDIT : reduced code

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]);

Applying the solution from Javascript global match with capturing groups:

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);
}