Javascript 从HTML计算每个元素的数量
考虑到我有下面的html页面Javascript 从HTML计算每个元素的数量,javascript,jquery,html,regex,Javascript,Jquery,Html,Regex,考虑到我有下面的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, initi
<!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">×</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"> </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>
审计任务
-
-
-
-
&时代；
任务已成功上载。
自日期起：
迄今为止：
组列表
选择组
上载人：
选择用户
复习
选择用户
挂起的任务：
查看任务
高级工程师
查询
查询标志
查询标志
查询标志
查询标志
查询标志
登录页标志
查询标志
查询标志
查询标志
查询标志
查询标志
查询标志
查询标志
查询标志
保存数据
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);
var标记=[]；
var str=“”；
var allTags=$（“body”）.find（“*”）；
$.each（所有标签，函数（k，v）{
var txt=$（this.html（）.trim（）；
var\u element=txt.match（/您的HTML无效。已修复此问题，但下次通过此网站运行时：
很快：
使用*
选择器创建节点列表，该选择器基本上收集文档中的每个元素
var tagList = document.querySelectorAll('*');
接下来，将节点列表转换为数组
var tagArray = Array.prototype.slice.call(tagList);
然后遍历数组以提取每个项的标记名
for (var i = 0; i < tagArray.length; i++) {
var tag = tagArray[i].tagName;
nodeArray.push(tag);
}
for（变量i=0；i
清单的最后一部分是SheetJS的
总之，下面是这个片段的结果：
“HTML”：1
"头":1,
"风格":三,
“剧本”：13
"身体":1,
“元”：5
"标题":一,
“链接”：5
"分区:29
“A”：7
“按钮”：4
“UL”：2
"李":6,
“跨度”：2
"强":一,
“IMG”：1
“形式”：1
“字段集”：1
“输入”：8
“标签”：6
“选择”：3
“选择”：3
“表”：1
“THEAD”：1
"TR":1,
"TH":17,
“TBODY”：1
“页脚”：1
一小条
var tagList=document.querySelectorAll（'*'）；
var tagArray=Array.prototype.slice.call（标记列表）；
变量noderray=[]；
对于（var i=0；i
审计任务
-
-
-
-
-
-
&时代；
任务已成功上载。
自日期起：
迄今为止：
组列表
选择组
上载人：
选择用户
复习
选择用户
挂起的任务：
查看任务
高级工程师
查询
查询标志
广告创意
广告创意旗
广告创意评级
登录页
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);