How to find out pairs of opening and closing html tags using javascript?

Question

How to find out pairs of opening and closing html tags in javascript?

So I've an array of parsed html:

/// this is just markup only : any inner text is omitted for simplicity.


const parsedHtml = [
    '<div class="container">',
    '<div class="wrapper">',
    '<h3>',
    '</h3>',
    '<p>',
    '</p>',
   '<span>',
    '<a href="#">',
     '<img src="./img.svg">',
    '</span>',
    '</div>',
    '</div>'
]

// this whole array is a block of html code (nesting is in the above order)

So the idea here is to find opening and closing tag pairs;

(just the index.)

So that I can separate out blocks of code ... like this:

<div class="container">
...
</div>


// or

<h3>
</h3>

//or 

<span>
...
</span>

Just need a way to find the index of closing tag that matches an opening tag. (think it as of opening blocks of code in vscode)

I could have done a check whether parsedHtml[i].startsWith('</')... but still this does not guarantee an opening and a closing pair like this:

<div> ---> opening

</div> --->  closing

[pair]

NOTE

This is for finding nesting of tags so that I can indent the html likewise && show each of them as blocks. I don't wanna use packages like parse5, marked, prismjs, or highlight js.

My requirement is custom. -> (Just to find the opening and closing tag pairs, so that I can find how things are nested from the above parsed html array)

No. This is for an html webpage... not to be done on vs code.. (we have extensions for that purpose ... right)... this is for parsing and displaying html in a specific manner inside a webpage.. — mx_code
– mx_code, Commented Oct 24, 2020 at 5:12

artem · Accepted Answer · 2020-10-24 06:00:55Z

That's my approach:

var parsedHtml = [
   '<div class="container">',
   '<div class="wrapper">',
   '<h3>',
   '</h3>',
   '<p>',
   '</p>',
   '<span>',
   '<a href="#">',
   '<img src="./img.svg">',
   '</span>',
   '</div>',
   '</div>'
];
var getTag = (s) => s.replace(/<|>/gi, '').split(' ')[0];
var isCloseTag = (t) => t.includes('/');

var indices = parsedHtml.map(getTag).reduce(collectIndices, {});
console.log(JSON.stringify(indices)); // {"div":[[0,11],[1,10]],"h3":[[2,3]],"p":[[4,5]],"span":[[6,9]],"a":[[7]],"img":[[8]]}

function collectIndices(indices, tag, i) {
   const tagName = tag.replace('/', '');
   if (!(tagName in indices)) {
      indices[tagName] = [[i]];
      return indices;
   }
   if (isCloseTag(tag)) {
      indices[tagName].reverse().find((ins) => ins.length === 1).push(i);
      return indices;
   }
   indices[tagName].push([i]);
   return indices;
}

jendiamond · Accepted Answer · 2023-01-30 19:41:40Z

0

I found this answer here using js regex: https://www.octoparse.com/blog/using-regular-expression-to-match-html

All you have to do is put the tag in that you are looking for.

If I were looking for the a tag: /<a\s*.*>\s*.*<\/a>/gi

You can test it out with this regex tool: https://regexr.com/

answered Jan 30, 2023 at 19:41

jendiamond

697 bronze badges

Collectives™ on Stack Overflow

How to find out pairs of opening and closing html tags using javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related