regex for proper nesting of dynamic menu

Question

I've a dynamic menu which looks like

<li class='has-sub'> cat1</li>
<ul>
    <li> test5</li>
    <li class='has-sub'> cat2</li>
    <ul>
        <li> cat9</li>
        <li class='has-sub'> cat7</li>
        <ul>
            <li> cat8</li>
            <li> cat10</li>
            <li> cat1 cat2</li>
        </ul>
    </ul>
</ul>
<li class='has-sub'> cat3</li>
<ul>
    <li> cat5</li>
</ul>

I want to change that to a properly nested navigation menu like

<li class='has-sub'> <a href='#'><span>cat1</span></a>
<ul>
    <li><a href='#'><span> test5</span></a></li>
    <li class='has-sub'><a href='#'><span> cat2</span></a>
    <ul>
        <li> <a href='#'><span>cat9</span></a></li>
        <li class='has-sub'> <a href='#'><span>cat7</span></a>
        <ul>
            <li> <a href='#'><span>cat8</span></a></li>
            <li> <a href='#'><span>cat10</span></a></li>
            <li> <a href='#'><span>cat1 cat2</span></a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</li>
<li class='has-sub'> <a href='#'><span>cat3</span></a>
<ul>
    <li> <a href='#'><span>cat5</span></a></li>
</ul>
</li>

I tried few str_replace but since the list is dynamic It wont work. I'm new to Regex and am not sure how to format this dynamic menu to a properly nested/formatted menu.

Thanks in advance!

@ICanHasCheezburger I learnt regex is good for dynamic things. I'm okay with any other solution if it does proper nesting! — now-r-never, May 07 '14 at 05:47
@now-r-never: Regex is good for some things, but parsing markup is beyond its capabilities. Regex and markup don't mix well, look into `DOMDocument` instead, to parse the markup — Elias Van Ootegem, May 07 '14 at 05:48

score 3 · Answer 1 · edited May 23 '17 at 10:26

3

It's an answer that has been linked to more than it probably has been read, but still: You can't parse markup using regex. Not reliably anyway.
Instead, you should use a parser like the DOMDocument class. Basic usage here would be:

$dom = new DOMDocument();
$dom->loadHTML($theMarkupString);
//get the list:
$list = $dom->getElementById('navContainerID');
$navItems = $list->getElementsByTagName('li');
foreach($navItems as $item)
{
    //add spans, links, classes... how to do so is all in the doc pages
}

edited May 23 '17 at 10:26

Community

1
1

answered May 07 '14 at 05:53

Elias Van Ootegem

74,482
9
111
149

Sorry! I can't understand how to do **nesting** with this! can you pls elaborate it.. – now-r-never May 07 '14 at 05:59
1

@now-r-never: RTM, it's all there: `DOMDocument` is a full DOM api. It has methods like `createElement` and `removeChild`, as well as `replaceChild`. Just read some documentation, don't go on to expect an answer you can copy-paste – Elias Van Ootegem May 07 '14 at 06:07

score 2 · Accepted Answer · answered May 07 '14 at 05:59

A simple DOM Parser and an strtr() will solve this...

$dom = new DOMDocument;
$dom->loadHTML($html);
$arrLi = array();
foreach ($dom->getElementsByTagName('li') as $tag) {
  $arrLi[$tag->nodeValue]="<a href='#'><span>$tag->nodeValue</span></a>";
}
echo $html = strtr($html,$arrLi);

Demonstration

regex for proper nesting of dynamic menu

2 Answers2