Regexp/preg_replace help - matching nested <ul> lists

bunner_bob

I've run into a tricky (for me) regular expression problem. I'm working with text that's been formatted by TinyMCE into regular HTML. The text will typically contain a bunch of -wrapped text, but possibly also some <ul> and <ol> sets.

I need to split the text into an array of chunks of text, where each chunk is either a paragraph (without the tags) or a ul or ol (WITH the <ul>/<ol> tags). From this I do further formatting before delivering to templates.

So for example, source text might look like:

<p>First paragraph.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
<p>A new paragraph.</p>

And the array after splitting would need to look like:

$text = array(
'First paragraph.',

'<ul>
<li>List item one</li>
<li>List item two</li>
</ul>',

'A new paragraph.');

I've been using preg_match_all to break apart everything within tags. To have this work on <ul>s I must first ADD tags to the <ul>s. So I've been using this function:

function splitText($text)
{

 // first stick extra p tags onto ul and ol so they won't be ignored by the next step

$pattern = array("/<ul>(.+)<\/ul>/Us", "/<ol>(.+)<\/ol>/Us");
$replace = array("<p><ul>$1</ul></p>", "<p><ol>$1</ol></p>");

$text = preg_replace($pattern, $replace, $text);

 // grab paragraph contents; look for any character (.); s modifier adds newline to "."; U modifier makes it ungreedy - otherwise treats the text block as a single paragraph

preg_match_all("/<p>(.+)<\/p>/Us",  $text, $postText);

   return $postText[1];
}

The problem is, the first pattern is too ungreedy when it comes to nested <ul>s - it seems to bail out at the first nested </ul>.

I tried removing the "U", making it greedy, but then I run into a problem if I have several sets of <ul>s with paragraphs in between - it treats the several sets as one big nested-ul-with-paragraphs-inside-it.

What I need is something in between - that will "know" when it's arrived at the closing of a set of nested <ul>s, without continuing on and including subsequent <ul>s.

Any of you regexp wizards out there have a tip or two you'd like to share?

bunner_bob

I think I need to clarify this - my original question had more info than necessary:

I need to properly preg_match a <ul></ul> block in HTML text, regardless of what's inside it - even if there are other <ul></ul> blocks nested inside. If I try to determine the end of the block by the first closing </ul> I come to I'll get a false positive if it hits the closing </ul> of an inner nested <ul> block.

Somehow, the comparison needs to keep count of how deep it is inside the nesting, and make sure the number of closing </ul>s equals the number of opening <ul>s before it considers the pattern matched.

The pattern I'm currently using is:

"/<ul>(.+)<\/ul>/Us";

and if I remove the "U" to make it greedy, it will match ALL the <ul>s in the HTML as a single match. I need to somehow make it "intelligently greedy".

Many, many thanks to anyone who can help!

rocco2004

Hi Bob,

Did you find a solution for nested <ul>. I'm having the same problem.

Thanks
Rocco

NogDog

Not exhaustively tested, but should work with well-constructed [X]HTML:

preg_match_all('#<ul.*</ul>(?![^<]*<li)#isU', $test, $matches);

rocco2004

Hello,

Thanks for the expression. I tried but seem like it is failing once it reaches Item 2.2. It will simply skip this part and will mess up the rest of the tree. Below is my sample code:

<ul>
      <li><a href="#">Item 1</a> </li>
      <li>Item 2<ul>
        <li>Item 2.1 <ul>
          <li><a href="#">Item 2.1.1</a> </li>
          <li><a href="#">Item 2.1.2</a> </li>
          <li><a href="#">Item 2.1.3</a> </li>
          <li><a href="#">Item 2.1.4</a> </li>
          <li><a href="#">Item 2.1.5</a> </li>
        </ul></li>
        <li><a href="#">Item 2.2</a> </li>
        <li><a href="#">Item 2.2.1</a> </li>
        <li><a href="#">Item 2.2.2</a> </li>
        <li><a href="#">Item 2.2.3</a> </li>
        <li><a href="#">Item 2.2.4</a> </li>
        <li><a href="#">Item 2.2.5</a> </li>
      </ul></li>
      <li>Item 3 <ul>
        <li><a href="#">Item 3.1</a> </li>
        <li><a href="#">Item 3.1</a> </li>
      </ul></li>
      <li>Item 4 <ul>
        <li><a href="#">Item 4.1</a> </li>
        <li><a href="#">Item 4.2</a> </li>
        <li>Item 4.3 <ul>
          <li><strong class="selflink">Item 4.3.1</strong> </li>
          <li><a href="#">Item 4.3.2</a> </li>
        </ul></li>
      </ul></li>
      <li><a href="#">Item 5</a> <ul>
        <li><a href="#">Item 5.1</a> </li>
        <li><a href="#">Item 5.2</a> </li>
        <li><a href="#">Item 5.3</a> </li>
        <li><a href="#">Item 5.4</a> </li>
        <li><a href="#">Item 5.5</a> </li>
      </ul></li>
    </ul>

NogDog

I think I copied and pasted the wrong version. Try removing the "U" modifier and see if that gives you what you want.

rocco2004

I tried, but removing the "U" modifier gives me only one match. The match is the whole same ul list.
Thanks.

NogDog

rocco2004;10882648 wrote:
I tried, but removing the "U" modifier gives me only one match. The match is the whole same ul list.
Thanks.

I thought that was what you wanted: the entire UL element even if it had internal UL's within it.

rocco2004

I want to have all 'li' in the first level after the root ul.
In the example above this is item 1 --> to item 5. I should have 5 arrays one for each item. Is it possible?