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> 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 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> 
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.)
maintag part and thenbrinside it..document.querySelector("main br")and possibly theDOMParser.