Question

考虑一下我的html页面。

<!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>

我需要一个正则表达式，它将使用html中的每个元素的数量创建对象。

例如。 {a：4，i：5，p：15，div：45 ......}

Answer 1

您的HTML无效。修正了它，但下次通过此网站运行：https://infohound.net/tidy/

真实很快：

使用*选择器创建一个NodeList，它基本上收集文档中的每个元素。
```
 var tagList = document.querySelectorAll('*');
```

接下来将NodeList转换为数组。

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

然后遍历数组以提取每个项目的tagName

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

         var tag = tagArray[i].tagName;

         nodeArray.push(tag);
    }

计算清单的最后一部分是SheetJS的nice and simple code。

无论如何，这是片段的结果：

“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

段

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>

Answer 2

我想出了自己的答案

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);

Answer 3

试试这个

更新的解决方案

 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/

从HTML计算每个元素的数量

3 个答案:

段