Question

I am having an issue with my javascript match() regex.

<div class="a">       whitespace, new lines, and  content    </div>
<div class="junk">    junkjunkjunk                           </div>
<div class="a">       whitespace, new lines, and  content    </div>
<div class="junk">    junkjunkjunk                           </div>
<div class="a">       whitespace, new lines, and  content    </div>

Let’s say I want to capture everything in between <div class="a"> and the closest </div>. The following regex is capturing everything, I’m assuming due to greediness:

/<div class="a">[\s\S]+<\/div>?/ig

I want to capture each <div class="a">...</div> individually such that I can output each as capture[0], capture[1], etc. How would I do this?

Thank you.

EDIT: Updated to better reflect my problem. Assume there is undesired markup and text between desired divs.

Answer 1

First, parsing HTML with regex is baaad… seriously man, you can use the innerHTML property of each div to change it’s content, or better, use jQuery or another javascript framework to do this kind of jobs.

This job can be made with jquery in this way:

$("div.a").each(
  function() {
    alert($(this).html())
  }
);

Second, if you want badly to use regex, and assuming there is only text (no markup) between the divs, you can use something like this:

/<div class="a">([^<])+<\/div>/ig