安兔兔排行榜提取和搜索

海天鹰

已于 2022-07-15 16:59:47 修改

阅读量218

点赞数

分类专栏： Chrome Extension 文章标签： ChromeExtension

于 2022-07-09 19:55:06 首次发布

本文链接：https://blog.csdn.net/sonichty/article/details/125697877

版权

Chrome Extension 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

手机性能排行榜_安兔兔跑分排行_安兔兔

使用Chrome扩展获取并拼接网页和JS内容，数据存在JS数组中，过滤到新数组中使用：

var uls = document.getElementsByClassName('tab-content')[0].getElementsByTagName('ul');
var s = '<html>\n<head>\n<title>安兔兔跑分排行榜</title>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>\n<style>\nh1 { text-align:center; }\na { text-decoration:none; }\ntable { border-collapse:collapse; margin:0 auto; }\nth, td { border:1px solid black; padding:10px; }\ntd:nth-child(1) { text-align:center; }\ntd:nth-child(n+3) { text-align:right; }\n</style>\n</head>\n<body>\n<h1>安兔兔跑分排行榜</h1>\n<p align="center"><a href="https://www.antutu.com/ranking/rank1.htm" target="_blank">数据来源</a></p>\n<p align="center"><input type="text" id="text"> <button id="button">过滤</button><br>搜索多个;分隔</p>\n<p align="center">S:Snapdragon, K:Kirin, M:MTK, E:Exynos, OC:OverClock</p>\n<table id="table">\n</table>\n<script>\nvar text = document.getElementById("text");\nvar button = document.getElementById("button");\nvar table = document.getElementById("table");\n\nvar item = new Array();\n';
for (var i=2; i<uls.length; i++) {
	var lis = uls[i].getElementsByTagName('li');
	s += 'item.push([';
	for (var j=0; j<lis.length; j++) {
		var li = lis[j].cloneNode(true);
		if (j == 0)
			li.firstChild.remove();
		s = s + '"' + li.textContent.replace(' 分', '') + '"';
		if (j < lis.length -1)
			s += ', ';
	}
	s += ']);\n';
}
s += '\nfunction search(s) {\n    table.innerHTML = "<tr><th>排行</th><th>手机名称</th><th>CPU</th><th>GPU</th><th>MEM</th><th>UX</th><th>总分</th></tr>";\n    var item1 = new Array();\n    for (var i=0; i<item.length; i++) {\n        if (s == "") {\n            item1.push(item[i]);\n        } else {\n            var sa = s.split(";");\n            for (var j=0; j<sa.length; j++) {\n                if (item[i][0].toLowerCase().indexOf(sa[j].toLowerCase()) != -1)\n                    item1.push(item[i]);\n            }\n        }\n    }\n    for (var i=0; i<item1.length; i++) {\n        var tr = document.createElement("tr");\n        var td = document.createElement("td");\n        td.textContent = (i+1);\n        tr.append(td);\n        for (var j=0; j<item1[i].length; j++) {\n            var td = document.createElement("td");\n            td.textContent = item1[i][j];\n            tr.append(td);\n        }\n        table.append(tr);\n    }\n}\n\nsearch("");\n\ntext.onkeypress = function (e) { if (e.keyCode == 13) { search(text.value); } }\nbutton.onclick = function() { search(text.value); }\n</script>\n</body>\n</html>';

var blob = new Blob([s], { 'type': 'text/html' });
var url = URL.createObjectURL(blob);
window.open(url);

运行后的网页：