Regex search & replacing the expression with something different for each occurrence of the expression

Question

I am using a vendor-supplied API that uses javascript to output HTML that essentially looks like this:

<li class="parent_class"> <a href="link1.html"> Parent Name </a> </li>

<div class="child_class"> 

<li> <a href="link2.html"> Child Name 1 </a> </li>

<li> <a href="link3.html"> Child Name 2 </a> </li>

</div>

 <li class="parent_class"> <a href="link4.html"> Parent Name 2</a> </li>

<div class="child_class"> 

<li> <a href="link5.html"> Child Name 1 </a> </li>

<li> <a href="link6.html"> Child Name 2 </a> </li>

</div>

And so on. This is the code I'm going for:

<li class="parent_class"> <a href="link1.html"> Parent Name </a> 

<ul id="xc"> 

<li> <a href="link2.html"> Child Name 1 </a> </li>

<li> <a href="link3.html"> Child Name 2 </a> </li>

</ul> </li>

 <li class="parent_class"> <a href="link4.html"> Parent Name 2</a> </li>

<ul id="1"> 

<li> <a href="link5.html"> Child Name 1 </a> </li>

<li> <a href="link6.html"> Child Name 2 </a> </li>

</ul></li>

(Just in case it is useful: I will be putting a <ul> tag before the API call and a </ul> tag after it to close up the whole list.)

Using more javascript, I've figured out how to replace the </div> with the </ul></li> using regular expression replace, but I'm not sure how to replace the </li><div> tags with the <ul> tags, because those need to be different every time. The first <ul> MUST be <ul id="xc"> (due to even more code I don't have control over). The other <ul>s must each have an ID, but those can be randomly generated.

I have a vague idea that I can use the exec method to create an array of all instances of </li></div>, set array[0] to <ul id="xc"> and then set array[1] to <ul id="1">, array[2] to <ul id="2"> and so on, but I'm not sure if that's a good idea (or how exactly to do it).

Thanks in advance.

Answer 1

Use a DOM parser which is perfectly suited for mark up languages such as HTML, NOT regular expressions.

You can use .getElementsByTagName and .getAttribute to grab what divisions you need and setAttribute, createElement, appendChild to create.

Answer 2

Assuming you receive the HTML as a string (as opposed to a document), you can convert it using this function:

function mogrify (input) {
    // 1) replace </li><div> with <ul>
    var i = 0;
    var out = input.replace(/<\/li>\s*<div[^>]*>/g, function () {
        var listID = i == 0
                   ? "xc"
                   : "xc_" + (Math.floor(Math.random() * 1e9) + 1);
        ++i;
        return '<ul class="' + listID + '">';
    });

    // 2) replace </div> with </ul></li>, like you described:
    return out.replace(/<\/div>/g, "</ul></li>");
}

Note that the input HTML is syntactically invalid, as is using bare numbers as ID attributes.