简体   繁体   中英

loop through html tags in string and add inner text to array

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM