Matching Deep Nested Elements HTML With RegEx

Question

I'm working on a number of HTML files and I'm trying to match a  tag inside a <li> inside a <ul>

For example:

<ul>
   <li>1</li>
   <li><p>2</p></li>
   <li>
      <ul>
         <li><p>3</p></li>
      </ul>
   </li>
</ul>

My goal is to match both  tags (2 and 3) separately with their nearest parent <li> and <ul> tags.

Here's the Regex I'm using

/<ul>.*?(<li.*?>).*?(<p.*?>.*?<\/p>)(.*?)(<\/li>)/gs

Problem happens when I try to match in an html like this:

<ul>
   <li>
      <ul>
         <li></li>
         <p>4</p>
      </ul>
   </li>
</ul>

It matches the  tag and the further away parent <li> and <ul> tags.

Does anyone have an idea how I can fix this?

Edit: Assuming I need to use Regex for this matching. I might end up using selectors in JS anyway like you guys suggested, but I'd still like to know if there's an easy fix for this pattern since this logic already exists in my app using Regex.

do you really need to have them with the regex, or having them in a js script would be good for the manipulations you want to do with them ? using regex on HTML is most of the time a bad idea and you might not need it — jonatjano, Dec 15 '21 at 15:23
First consider using the [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) logic — Redu, Dec 15 '21 at 15:24
I have posted an idea of mine below. BTW you do not have to write `.*?`. `.*` means *"0 or more"* so it is already optional. — Peter Krebs, Dec 15 '21 at 16:08
Parsing html with a regex can be [error prone](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454). If possible, consider using a (dom)parser. — The fourth bird, Dec 15 '21 at 21:17
@Bousha What is the final goal that you are trying to achieve? Because it sounds as an [XY problem](https://xyproblem.info) — Nikita Skrebets, Dec 16 '21 at 07:53

score 1 · Answer 1 · answered Dec 15 '21 at 16:02

If your goal is to fix / find bad HTML? I.e.  as direct descendant of <ul> is not allowed; hence regex, a better approach would likely be a simple parser.

If not; simplest would be something like document.createElement + innerHTML + querySelectorAll.

If using RegExp use negated <> as "delimiter" when matching tags, i.e:

<foo[^>]*>

// and

[^<]*

Though obviously not fool-proof. Quick and dirty for your case:

/<ul>[^<]*<li[^>]*>[^<]*<p[^>]*>([^<]*)/
      |       |     |
      |       |     +-- ...
      |       +-- not >
      +-- not <

Would crash with tags inside  (I.e. depends on text only inside  ... ).

score 0 · Answer 2 · answered Dec 15 '21 at 15:50

This is a partial answer.

The best I got to is with /<ul>.*?(<li.*?>(?:(?!<li>).)*?<p.*?>.*?<\/p>(?:(?!<\/li>).)*<\/li>)/gs

With

<ul>
   <li>1</li>
   <li><p>2</p></li>
   <li>
      <ul>
         <li><p>3</p></li>
      </ul>
   </li>
</ul>

it gives (first one is obviously wrong)

<li>1</li> <li>2</li> and <li>3</li>

With

<ul>
   <li>
      <ul>
         <li></li>
         <p>4</p>
      </ul>
   </li>
</ul>

the result is

<li>
      <ul>
         <li></li>
         <p>4</p>
      </ul>
   </li>

Maybe someone can improve it further

score 0 · Answer 3 · answered Dec 15 '21 at 16:03

You have been warned to use regular expressions with HTML in the comments.
They are correct, the hiararchical structure means a linear pattern can not always find your desired solution.

Works with valid HTML

Assuming the HTML is valid anyway and there is only whitespace between the tags you are looking for, I have come up with this:

  \s*(<li.*>)?\s*(<p.*>.*<\/p>)\s*(<\/li>)?

This makes the surrounding li element optional but still captures it if it exists (at least in your examples).
Assuming whitespace everywhere else, so \s*
I have replaced .*? with .*: You do not have to write .*?, * already means "0 or more".

You can experiment with it here:
https://regex101.com/r/oyNweY/1

Matching Deep Nested Elements HTML With RegEx

3 Answers3

Works with valid HTML