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

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.