-2

Consider I have below html page.

<!doctype html>
<html lang="en">
<head>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../favicon.ico">-->

    <title>Audit Task</title>

    <!-- Bootstrap core CSS -->

    <!-- Bootstrap theme -->
    <link href="../../css/slimplex.css" rel="stylesheet">
    <link href="../../css/datepicker.css" rel="stylesheet">
    <link href="../../css/style.css" rel="stylesheet">

    <link href="../../css/jquery-ui.css" rel="stylesheet">

    <link href="../../css/jquery.jqplot.min.css" rel="stylesheet">
</head>
  <body>
    <div class="container main-container">

        <div class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <a href="/" class="navbar-brand">Task Engine</a>
              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
              </button>
            </div>
            <div class="navbar-collapse collapse" id="navbar-main">
              <ul class="nav navbar-nav">

                <li class="dropdown">
                  <a href="/users">Users</span></a>
                </li>
                <li class="dropdown">
                  <a href="/stats">Statistics</span></a>
                </li>




                  <li>
                  <a href="/audit_task">Audit Tasks</a>
                </li>



                  <li>
                  <a href="/groups">Groups</a>
                </li>


              </ul>

              <ul class="nav navbar-nav navbar-right">
                <li><a href="#" id="loginName"> Hi Rajesh Dhoble</a></li>
                <li><a href="/logout">Logout</a></li>
              </ul>
            </div>
          </div>
        </div>

      <div class="row">
         <div class="col-lg-6 col-sm-offset-3">
           <div class="alert alert-dismissible alert-success">
             <button type="button" class="close" data-dismiss="alert">&times;</button>
             <strong id="task-upload-count"></strong> tasks has been uploaded successfully.
           </div>
         </div>
       </div>
       <div class="overlay">
         <img src="/img/ajax-loader.gif" alt="Smiley face" height="42" width="42" class="spinner">
       </div>


        <form class="form-horizontal" id="searchTask" action="/audit_task" method="post">
        <fieldset>

         <input type="hidden" id="user_role" name="user_role" value="Manager">
         <input type="hidden" id="user_group_id" name="user_group_id" value="5747fad68b10d2c73ad53023">
         <input type="hidden" id="user_id" name="user_id" value="5747fa9bf9de7b483f170818">
         <input type="hidden" id="user_name" name="user_name" value="Rajesh Dhoble">
         <input type="hidden" id="selecte_user_role" name="selecte_user_role">


          <div class="form-group">
            <label for="fromDate" class="col-lg-2 control-label">From Date:</label>
            <div class="col-lg-3">
              <input type="text" class="form-control datepicker" id="auditTaskFromDate" placeholder="mm/dd/yyyy" name="fromDate" value="" autocomplete="off">
            </div>
          </div>
           <div class="form-group">
            <label for="toDate" class="col-lg-2 control-label">To Date:</label>
            <div class="col-lg-3">
              <input type="text" class="form-control datepicker" id="auditTaskToDate" placeholder="mm/dd/yyy" name="toDate" value="" autocomplete="off">
            </div>
          </div>


                <div class="form-group">
                  <label for="inputPassword" class="col-lg-2 control-label">Group List</label>
                  <div class="col-lg-3">
                    <select id="sel_group" name="user_group" > 
                    <option selected disabled>Select Group</option>
                  </select>
                  </div>
               </div>



        <div style='float:left ,display: in-line,width: 123px;'>
          <div class="form-group">
            <label for="sel_analyst" class="col-lg-2 control-label">Uploaded By :</label>
            <div class="col-lg-3">
              <select id="sel_analyst" name="selected_user_id" > 
              <option selected disabled>Select User</option>
            </select>
            </div>
          </div>
         <div class="form-group">
            <label for="sel_reviewer" class="col-lg-2 control-label">Reviewd By</label>
            <div class="col-lg-3">
              <select id="sel_reviewer" name="selected_viewer_id" > 
              <option selected disabled>Select User</option>
            </select>
            </div>
          </div>

          <div class="form-group">
            <label for="toDate" class="col-lg-2 control-label">Pending Task:</label>
            <div class="col-lg-3">
              <input type="checkbox" id="pending_task" name="pending_task" value="PendingTask">
            </div>
          </div>
           <div class="form-group">
            <div class="col-lg-3 col-lg-offset-2">
              <button type="submit" class="btn btn-success">View Task</button>
            </div>
          </div>
           </div>
         </fieldset>
      </form>

       <div class="bs-component">
        <table id="excelDataTable" class="table table-striped table-hover ">
      <thead>
        <tr>
            <th data-field="S_No">Sr.No</th>
            <th data-field="query">query</th>
            <th data-field="query_flag">Query Flag</th>
            <th data-field="ad_creative">Query Flag</th>
            <th data-field="ad_creative_flag">Query Flag</th>
            <th data-field="ad_creative_rating">Query Flag</th>
            <th data-field="landing_page wrap">Query Flag</th>
            <th data-field="landing_page_flag">Landing Page Flag</th>
            <th data-field="landing_page_rating">Query Flag</th>
            <th style="width:200px" data-field="user_comments">Query Flag</th>

             <th data-field="user_name">Query Flag</th>
            <th data-field="is_correct">Query Flag</th>
            <th data-field="verifier_comments">Query Flag</th>

             <th data-field="verifier_name">Query Flag</th>

            <th style="display:none;" data-field="_id">Query Flag</th>
            <th style="display:none;" data-field="verifier_id">Query Flag</th>
            <th style="width:200px">&nbsp;&nbsp;&nbsp;</th>
        </tr>
    </thead>
    <tbody id="audit_tasks">

    </tbody>
  </table>
</div>

<div class="pagination">

</div>


 <div class="col-lg-10">
   <button type="button" id="save_btn" class="btn btn-success">Save Data</button>
</div>


    </div>
    <footer class="text-left">
</footer>
  </body>
  <script src="../../components/jquery/dist/jquery.min.js"></script>
  <script src="../../components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../../components/underscore/underscore-min.js"></script>
  <script src="../../js/bootstrap-datepicker.js"></script>
  <script src="../../js/jquery-ui.js"></script>
  <script src="../../js/jquery.jqplot.min.js"></script>
  <script src="../../js/jqplot.pieRenderer.js"></script>
  <script src="../../js/jquery-dateFormat.min.js"></script>
  <script src="../../js/custom.js"></script>

</html>

I need a regex that will create object with number of each element from html.

eg. {a: 4, i: 5, p:15, div: 45...}

Mukesh
  • 1,257
  • 11
  • 27

3 Answers3

1

Your HTML was invalid. Fixed it but next time run it through this site: https://infohound.net/tidy/

Real quickly:

  1. Make a NodeList using the * selector which basically gathers every element on the document.

     var tagList = document.querySelectorAll('*');

  2. Next convert the NodeList into an Array.

      var tagArray = Array.prototype.slice.call(tagList);

  3. Then iterate through the Array to extract each item's tagName

        for (var i = 0; i < tagArray.length; i++) {

         var tag = tagArray[i].tagName;

         nodeArray.push(tag);
    }

  4. The last part counting the list is SheetJS's nice and simple code.

Anyways here's the result from the Snippet:

"HTML": 1,

"HEAD": 1,

"STYLE": 3,

"SCRIPT": 13,

"BODY": 1,

"META": 5,

"TITLE": 1,

"LINK": 5,

"DIV": 29,

"A": 7,

"BUTTON": 4,

"UL": 2,

"LI": 6,

"SPAN": 2,

"STRONG": 1,

"IMG": 1,

"FORM": 1,

"FIELDSET": 1,

"INPUT": 8,

"LABEL": 6,

"SELECT": 3,

"OPTION": 3,

"TABLE": 1,

"THEAD": 1,

"TR": 1,

"TH": 17,

"TBODY": 1,

"FOOTER": 1

SNIPPET

var tagList = document.querySelectorAll('*');

var tagArray = Array.prototype.slice.call(tagList);

var nodeArray = [];

for (var i = 0; i < tagArray.length; i++) {

  var tag = tagArray[i].tagName;

  nodeArray.push(tag);
}


console.log(nodeArray);


//https://stackoverflow.com/a/19395302/2813224

var counts = {};

nodeArray.forEach(function(x) { 
  
  counts[x] = (counts[x] || 0) + 1; 

});

console.log(counts);
<!doctype html>
<html lang="en">

<head>


  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- <link rel="icon" href="../../favicon.ico">-->

  <title>Audit Task</title>

  <!-- Bootstrap core CSS -->

  <!-- Bootstrap theme -->
  <link href="../../css/slimplex.css" rel="stylesheet">
  <link href="../../css/datepicker.css" rel="stylesheet">
  <link href="../../css/style.css" rel="stylesheet">

  <link href="../../css/jquery-ui.css" rel="stylesheet">

  <link href="../../css/jquery.jqplot.min.css" rel="stylesheet">
</head>

<body>
  <div class="container main-container">

    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="/" class="navbar-brand">Task Engine</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">

            <li class="dropdown">
              <a href="/users"><span>Users</span></a>
            </li>
            <li class="dropdown">
              <a href="/stats"><span>Statistics</span></a>
            </li>




            <li>
              <a href="/audit_task">Audit Tasks</a>
            </li>



            <li>
              <a href="/groups">Groups</a>
            </li>


          </ul>

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="loginName"> Hi Rajesh Dhoble</a>
            </li>
            <li><a href="/logout">Logout</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6 col-sm-offset-3">
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <strong id="task-upload-count"></strong> tasks has been uploaded successfully.
        </div>
      </div>
    </div>
    <div class="overlay">
      <img src="/img/ajax-loader.gif" alt="Smiley face" height="42" width="42" class="spinner">
    </div>


    <form class="form-horizontal" id="searchTask" action="/audit_task" method="post">
      <fieldset>

        <input type="hidden" id="user_role" name="user_role" value="Manager">
        <input type="hidden" id="user_group_id" name="user_group_id" value="5747fad68b10d2c73ad53023">
        <input type="hidden" id="user_id" name="user_id" value="5747fa9bf9de7b483f170818">
        <input type="hidden" id="user_name" name="user_name" value="Rajesh Dhoble">
        <input type="hidden" id="selecte_user_role" name="selecte_user_role">


        <div class="form-group">
          <label for="fromDate" class="col-lg-2 control-label">From Date:</label>
          <div class="col-lg-3">
            <input type="text" class="form-control datepicker" id="auditTaskFromDate" placeholder="mm/dd/yyyy" name="fromDate" value="" autocomplete="off">
          </div>
        </div>
        <div class="form-group">
          <label for="toDate" class="col-lg-2 control-label">To Date:</label>
          <div class="col-lg-3">
            <input type="text" class="form-control datepicker" id="auditTaskToDate" placeholder="mm/dd/yyy" name="toDate" value="" autocomplete="off">
          </div>
        </div>


        <div class="form-group">
          <label for="inputPassword" class="col-lg-2 control-label">Group List</label>
          <div class="col-lg-3">
            <select id="sel_group" name="user_group">
              <option selected disabled>Select Group</option>
            </select>
          </div>
        </div>



        <div style='float:left ,display: in-line,width: 123px;'>
          <div class="form-group">
            <label for="sel_analyst" class="col-lg-2 control-label">Uploaded By :</label>
            <div class="col-lg-3">
              <select id="sel_analyst" name="selected_user_id">
                <option selected disabled>Select User</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="sel_reviewer" class="col-lg-2 control-label">Reviewd By</label>
            <div class="col-lg-3">
              <select id="sel_reviewer" name="selected_viewer_id">
                <option selected disabled>Select User</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label for="toDate" class="col-lg-2 control-label">Pending Task:</label>
            <div class="col-lg-3">
              <input type="checkbox" id="pending_task" name="pending_task" value="PendingTask">
            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-3 col-lg-offset-2">
              <button type="submit" class="btn btn-success">View Task</button>
            </div>
          </div>
        </div>
      </fieldset>
    </form>

    <div class="bs-component">
      <table id="excelDataTable" class="table table-striped table-hover ">
        <thead>
          <tr>
            <th data-field="S_No">Sr.No</th>
            <th data-field="query">query</th>
            <th data-field="query_flag">Query Flag</th>
            <th data-field="ad_creative">Ad Creative</th>
            <th data-field="ad_creative_flag">Ad Creative Flag</th>
            <th data-field="ad_creative_rating">Ad Creative Rating</th>
            <th data-field="landing_page wrap">Landing Page</th>
            <th data-field="landing_page_flag">Landing Page Flag</th>
            <th data-field="landing_page_rating">Landing Page Rating</th>
            <th style="width:200px" data-field="user_comments">User Comments</th>

            <th data-field="user_name">Analyst Name</th>
            <th data-field="is_correct">Is Correct</th>
            <th data-field="verifier_comments">Verifier Comments</th>

            <th data-field="verifier_name">Verifier Name</th>

            <th style="display:none;" data-field="_id">_id</th>
            <th style="display:none;" data-field="verifier_id">verifier_id</th>
            <th style="width:200px">&nbsp;&nbsp;&nbsp;</th>
          </tr>
        </thead>
        <tbody id="audit_tasks">

        </tbody>
      </table>
    </div>

    <div class="pagination">

    </div>


    <div class="col-lg-10">
      <button type="button" id="save_btn" class="btn btn-success">Save Data</button>
    </div>


  </div>
  <footer class="text-left">
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="../../components/jquery/dist/jquery.min.js"></script>
  <script src="../../components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="../../components/underscore/underscore-min.js"></script>
  <script src="../../js/bootstrap-datepicker.js"></script>
  <script src="../../js/jquery-ui.js"></script>
  <script src="../../js/jquery.jqplot.min.js"></script>
  <script src="../../js/jqplot.pieRenderer.js"></script>
  <script src="../../js/jquery-dateFormat.min.js"></script>
  <script src="../../js/custom.js"></script>

</body>

</html>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

I figured out own here is the answer

var str = '<html> <head> </head> <body> <a>This is a tagt 2</a> <p>This is paragraph1</p> <a>This is Assigntment 2</a> <p>This is paragraph1 </p> <div> <img> </img> </div> <div> <img> </img> </div> </body> </html> ';
var re = /<([a-z]+)(?=[\s>])(?:[^>=]|='[^']*'|='[^']*"|=[^'"\s]*)*\s?\/?>/g;
var tags = str.match(re);

console.log(tags);
var element_object = {};
for (var i = 0; i <= tags.length; i++) {
   if (Object.keys(element_object).includes(tags[i])) {
     element_object[tags[i]] = element_object[tags[i]] + 1
   } else {
     element_object[tags[i]] = 1;
   }
}
console.log(element_object);
Mukesh
  • 1,257
  • 11
  • 27
-1

Try this

UPDATED SOLUTION

 var tag = [];
var str = "";
var allTags =  $("body").find("*");
$.each(allTags,function(k,v){
  var txt =  $(this).html().trim();
  var _element = txt.match(/<\w+/);
  if(_element != null)
    var _tag = _element[0].match(/\w+/);
  if(_tag != null)  
  {
    if($.inArray(_tag[0],tag) ==-1){
      tag.push(_tag[0]);
       var cnt = $(_tag[0]).length;
       str += _tag[0] + ":" +cnt + " ";
    }
  }

});


alert(str);

https://jsfiddle.net/sum1/ppw7LLhe/1/

suman
  • 728
  • 3
  • 10
  • 29
  • I cannot list all the elements and count them. I need something like iterating all children elements and recording count of all elements found etc. Perhaps something like a recursive function :/ – Mohit Bhardwaj Jun 10 '16 at 06:15
  • Will give you solution in a while. – suman Jun 10 '16 at 06:19