Using the JavaScript regular expression flavour, how to match a specific tag only when inside another specific tag?

Question

I want to match only the <br> tags that are inside the <main> tag and not all of them:

Is it possible to do it with a JS regex? I'm trying to do a find and replace (with regex) in all files in a project.

Here's the raw text:

<br>
<main>
    <input>
    <br>
    <hr>
    <br>
    <etc>
</main>

i think it will be better to first capture the `main` tag part and then `br` inside it.. — rock321987, Jun 13 '16 at 04:46
also, it will be better to use html parser instead of regex unless you are bound to use it — rock321987, Jun 13 '16 at 04:53
Why RegEx, though? You can match the tags themselves with `document.querySelector("main br")` and possibly the [`DOMParser`](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser). — Sebastian Simon, Jun 13 '16 at 04:54
Don't. [Just don't.](http://stackoverflow.com/a/1732454/615754) — nnnnnn, Jun 13 '16 at 04:56
It has to be regex because I'm trying to do a find and replace (with regex) in all files in a project. — nunoarruda, Jun 13 '16 at 05:46

score 2 · Accepted Answer · answered Jun 13 '16 at 13:13

Using DOM is always better for parsing HTML text. However if for reason you cannot use DOM here is a regex solution to match all <br> tags between <main> and </main>.

/<\s*br\s*\/?>(?=.*?(?:(?!<main>)[\s\S])*?<\/main>)/gi

RegEx Breakup:

<\s*br\s*\/?>   # matches <br> or <br />
(?=             # start of lookahead
  .*?           # any arbitrary text, lazy
  (?:           # start of non-capturing group
     (?!        # start of negative lookahead
       <main>   # literal text <main>
     )          # end of negative lookahead   
     [\s\S]*?   # match 0 or more of any char including newline, lazy
  )             # end of non-capturing group
  <\/main>      # match </main>
)               # end of lookahead
/gi             # make it global ignore case match

RegEx Demo

Naga Sai A · Answer 2 · 2016-06-13T05:32:31.913

Created codepen URL for capturing only the BR elements with MAIN using

 document.body.childNodes

codepen-http://codepen.io/nagasai/pen/MeybzK

First got all the childNodes of Body and then MAIN and filtered BR tags from that

Hope this is helpful for you

        function allTags() {
        var c = document.body.childNodes;
        //console.log(c);
        var txt = "";
        var i;
        for (i = 0; i < c.length; i++) {
            if (c[i].nodeName == "MAIN") {
                // alert(c[i].childNodes.length )
                for (j = 0; j < c[i].childNodes.length; j++) {
                    //alert(c[i].childNodes[j].nodeName);
                    if (c[i].childNodes[j].nodeName == "BR") {
                        txt = txt + c[i].childNodes[j];
                    }
                }

            }

        }
        console.log(txt);

        document.getElementById("demo").innerHTML = txt;
    }

HTML:

          <p>11</p><br>
      <main>
          <br>
          <div>q1111</div><br>
      </main>

      <button onclick="allTags()">Tags</button>
      <div id="demo"></div>

sure Roko... I just left the gist of code which i have used to achieve ..I will update it now :) — Naga Sai A, Jun 13 '16 at 05:31

score 0 · Answer 3 · answered Jun 13 '16 at 13:40

As others have commented and I always say, don't use regexes to parse HTML. And yes, you can use the DOM to replace elements. It won't be quite as compact (and unreadable) as a regex but I think this is still quite short :

for(let br of document.querySelector('main br'))
  br.parentNode.replaceChild(br, document.createElement('span'))

(assuming you wanted to replace <br>s with another Element. Deleting or replacing with text would be just as easy.)

Using the JavaScript regular expression flavour, how to match a specific tag only when inside another specific tag?

3 Answers3