2

I researched this quite a bit, but couldn't find a working example how to match nested html tags with attributes. I know it is possible to match balanced/nested innermost tags without attributes (for example a regex for and would be #<div\b[^>]*>(?:(?> [^<]+ ) |<(?!div\b[^>]*>))*?</div>#x).

However, I would like to see a regex pattern that finds an html tag pair with attributes.

Example: It basically should match

<div class="aaa"> **<div class="aaa">** <div> <div> </div> **</div>** </div>

and not

<div class="aaa"> **<div class="aaa">** <div> <div> **</div>** </div> </div>

Anybody has some ideas?

For testing purposes we could use: http://www.lumadis.be/regex/test_regex.php


PS. Steven mentioned a solution in his blog (actually in a comment), but it doesn't work

http://blog.stevenlevithan.com/archives/match-innermost-html-element

$regex = '/<div\b[^>]+?\bid\s*=\s*"MyID"[^>]*>(?:((?:[^<]++|<(?!\/?div\b[^>]*>))+)|(<div\b[^>]*>(?>(?1)|(?2))*<\/div>))?<\/div>/i';
2
  • 1
    It is usually not a good idea to try and parse html/xml with regex. If you could tell us specifically what you are trying to do, we may be able to point you in a more appropriate direction :o)
    – OdinX
    Jun 19, 2010 at 16:32
  • Just to clarify. This is more of a theoretical discussion, just for fun. Of course in real life I would use xpath or so. I understand that "finite state" or "true" regex are not able to do that, but what about the PHP/PCRE flavor of regex (which are not really "classical" regex anymore, for example they even support recursive patterns ?R). – Dave 0 secs ago edit
    – Dave
    Jun 20, 2010 at 0:44

4 Answers 4

5

Matching innermost matching pairs of <div> & </div> tags, plus their attributes & content:

#<div(?:(?!(<div|</div>)).)*</div>#s

The key here is that (?:(?!STRING).)* is to strings as [^CHAR]* is to characters.

Credit: https://stackoverflow.com/a/6996274


Example in PHP:

<?php

$text = <<<'EOD'
<div id="1">
  in 1
  <div id="2">
    in 2
    <div id="3">
      in 3
    </div>
  </div>
</div>
<div id="4">
  in 4
  <div id="5">
    in 5
  </div>
</div>
EOD;

$matches = array();
preg_match_all('#<div(?:(?!(<div|</div>)).)*</div>#s', $text, $matches);

foreach ($matches[0] as $index => $match) {
  echo "************" . "\n" . $match . "\n";
}

Outputs:

************
<div id="3">
      in 3
    </div>
************
<div id="5">
    in 5
  </div>
2

RegEx match open tags except XHTML self-contained tags

And indeed, it is absolutely impossible. HTML has something unique, something magical, which is immune to RegEx.

3
  • 1
    something magical, which is immune to RegEx == XML, HTML, and friends are no regular languages Jun 19, 2010 at 16:42
  • 1
    It's bad enough having to see links to The Rant in every other question; copying it is going too far. It isn't that funny, and more to the point, it isn't helpful.
    – Alan Moore
    Jun 19, 2010 at 21:56
  • Just to clarify. This is more of a theoretical discussion, just for fun. Of course in real life I would use xpath or so. I understand that "finite state" or "true" regex are not able to do that, but what about the PHP/PCRE flavor of regex (which are not really "classical" regex anymore, for example they even support recursive patterns ?R).
    – Dave
    Jun 20, 2010 at 0:43
2

I built a brief python script to solve the issue of managing nested tags. It runs happily with html and with other, terrible nested syntaxes too, as wiki code. Hyronically, I wrote it to avoid regex! I couldn't understand them at all. :-(. I used that function for anything, it runs very well for html and xml. It's fast too, since it only uses basic string search. I'm very happy to know that regex can't help. :-)

I'd like to share the script, if anyone of you is interested; but consider, I'm not a programmer, I presume that the issue has been solved for a long time!

You can find me at my talk page into it.source: http://it.wikisource.org/wiki/Discussioni_utente:Alex_brollo

0

You can do it recursively, using the same regex but executed while needed. Like this:

function htmlToPlainText(html) {
    let text = html || ''

    // as there is html nested inside some html attributes, we need a recursive strategy to clean up the html
    while (text !== (text = text.replace(/<[^<>]*>/g, '')));

    return text
  }

This works with cases like:

<p data-attr="<span>Oh!</span>">Lorem Ipsum</p>

I found this script here: http://blog.stevenlevithan.com/archives/reverse-recursive-pattern

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.