regex for extracting HTML tag child elements?

Question

I have following code in HTML string.

<h3 class="large lheight20 margintop10">
<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">
<span>get the content</span>
</a>

</h3><h3 class="large lheight20 margintop10">
<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">
<span>get the content</span>
</a>

</h3>

and i want to extract the following tag:

    <a href="https://google.com" class="marginright5 link linkWithHash detailsLink">
    <span>get the content</span>
    </a>
<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">
<span>get the content</span>
</a>

I have written following regex :

<h3[^>]+?>(.*)<\/h3>

But it is returning wrong results :

<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">
<span>get the content</span>
</a>

</h3><h3 class="large lheight20 margintop10">
<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">
<span>get the content</span>
</a>

Please help me to extract the tags.

I think [***Tony the pony***](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags#answer-1732454) would dislike this !!! — adeneo, Apr 25 '16 at 17:32
Use `.*?` instead of `.*`. The latter is greedy and will match from the first
to the last
, which is what you're seeing. — Anton, Apr 25 '16 at 17:32
@adeneo - thx for the link :) , but I think in this case with a defined subset (H3 tag here) - it's manageable with regExp and without getting _infected_ ... — michaPau, Apr 25 '16 at 17:45
@michaPau - the point is, it's just so easy to parse the HTML and do `document.querySelectorAll('a')` — adeneo, Apr 25 '16 at 17:48

score 2 · Accepted Answer · answered Apr 25 '16 at 17:45

2

Use this regex:

<h3[^>]+?>([^$]+?)<\/h3>

Example here:

https://regex101.com/r/pQ5nE0/2

answered Apr 25 '16 at 17:45

Nabeel Khan

3,715
2
24
37

score 2 · Answer 2 · answered Apr 25 '16 at 20:00

2

You could try:

function getA(str) {
  var regex = /<a\s+[\s\S]+?<\/a>/g;
  while (found = regex.exec(str)) {
    document.write(found[0] + '<br>');
  }
}

var str = '<h3 class="large lheight20 margintop10">\n' +
  '<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">\n' +
  '<span>get the content</span>\n' +
  '</a>\n' +
  '\n' +
  '</h3><h3 class="large lheight20 margintop10">\n' +
  '<a href="https://google.com" class="marginright5 link linkWithHash detailsLink">\n' +
  '<span>get the content</span>\n' +
  '</a>\n' +
  '\n' +
  '</h3>';
getA(str);

answered Apr 25 '16 at 20:00

Quinn

4,394
2
21
19

you don't need to add "+" in each line and keep quoting again and again in js, simply add backslash at the end of line – Nabeel Khan Apr 26 '16 at 05:57
also, what happens to other links on the page, other than within h3 ones, they get matched too! – Nabeel Khan Apr 26 '16 at 08:36

regex for extracting HTML tag child elements?

to the last

2 Answers2