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 comes back with the whole header text, how do I get just the inner text?
Wouldn't mind using jQuery.
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)
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); }
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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.