regular expression to compare variables inside html tags

Question

Ive been going through the regular expression things and consider we have an array which has html tags stored in as strings.. like array=["</div>,"</a>", "<div id='test'>", "<a href='http://test/new.html'>", "</a>", "</div>", "<span style='color:#ffffff;'>"]

if we go through the array one by one,

if we want to detect complete tags and incomplete tags, like for example, <div> is openened and </div> its closed in location after that.. so those two comes under complete tags... <span> is opened, but never closed, so it comes under incomplete open tags, </div> at first location is closed, so it comes under incomplete closed tags.

Can this be done using JavaScript?

Answer 1

This sounds like a great problem for teaching the utilities of the Stack data type. In Javascript, all arrays have use of stack functions, as seen here .

How do you do it?

Start with an empty stack. Loop through the elements of your array, in order. For each item:

• If it is an open tag, push it on to your stack.
• If it is a close tag, pop the top item from your stack
  • Check that the two tags match. (You must close the most recently opened item, no?)
  • If not, fail

Finally, when you've finished your array, check that the stack is empty.

• If not, not every tag was closed. Fail
• If so, success!

For example:

[<div>, <a>, <span>, </span>, </div>, </a>]

Will fail. Push div , push a , push span . Pop span . Pop a , which does not match div

It should look like

[<div>, <a>, <span>, </span>, </a>, </div>]

Which will pass, as the stack will be empty (have a length of 0) at the end of the method.

---

Edit: If you want to use regex in the separate steps:

To determine if a tag is open:

tag.match(/<\//) == null

This checks if a tag contains the characters <\\

To get the content from a tag:

var tagContent = tag.match(/\w+/)[0];

This grabs a group of word characters. Specifically, the first group. It should just grab the tag name and ignore any attributes, as the whitespace will end the expression. Match always returns an array, in case you matched globally (where there would be multiple matches), so get the 0-th index of the returned array to get the value.

To compare two tags:

tag1Content == tag2Content

This seriously does not require regex.

Answer 2

var stack=new Array();
var stackCount = 0;

 var array=["</div>","<div id='test'>", "<a href='http://test/new.html'>", "</a>", "</div>", "<span style='color:#ffffff;'>"];    
        for(var k=0;k<array.length;k++)
        {
                    alert("Eleemnt Selected:" + array[k]);
                    if(stackCount==0)
                        {
                        if(array[k].match(/<\//)==null)
                            {
                            stack.push(array[k]);
                            stackCount++;
                            alert("Pushed in to the stack as stack is empty" + stack);
                            }
                        else
                            {
                            alert("Ignored as it is a tag containing slash");
                            }

                        }
                    else
                        {
                        var tagType1=array[k].match(/<\//);
                        var tagType2=stack[0].match(/<\//);
                        var cmpTag1=array[k].match(/\w+/);  
                        var cmpTag2=stack[0].match(/\w+/);

                        //alert("Tag Type : Array element :" +tagType1 + "Stack element : " +  tagType2 + "Tag Name: Array element : " + cmpTag1 + "Stack Element : " +cmpTag2);
                        if(cmpTag1!=cmpTag2 && tagType1!=tagType2)
                            {   

                            stack.pop();
                            stackCount--;
                            alert("same Tags, so popped out from the stack" + stack);
                            }

                        else
                        {
                        stack.push(array[k]);
                        stackCount++;
                        alert("Pushed in to the stack as items compared are different");
                        }
                        }



        }

Ive posted my answer...I tried and this is where I am... any feedbacks or improvemnts from your side??? I m concerned about the part, , since it is a closed tag, it should pop out.. right??