mirror of https://github.com/helloxz/onenav.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
4.9 KiB
190 lines
4.9 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>处理导出的谷歌浏览器书签</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
width: 100px;
|
||
|
|
height: 60px;
|
||
|
|
border-radius: 6px;
|
||
|
|
background: #cccfff;
|
||
|
|
border: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 20%;
|
||
|
|
height: 5%;
|
||
|
|
border: 0px #cccfff solid;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="body">
|
||
|
|
<div class="box">
|
||
|
|
<input type="file" id="file">
|
||
|
|
<button id="btn" onclick="submit()">确定</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
/**
|
||
|
|
* 点击确认按钮
|
||
|
|
*/
|
||
|
|
function submit() {
|
||
|
|
// 获取文件对象
|
||
|
|
var file = document.getElementById("file").files[0];
|
||
|
|
if (file.name.indexOf(".html") < 0) {
|
||
|
|
// 不处理非html的文件类型
|
||
|
|
alertErr()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
// 获取文件里面的文本信息
|
||
|
|
file.text().then(res => {
|
||
|
|
// 内容转成dom对象
|
||
|
|
let doms = parseToDOM(res);
|
||
|
|
for (const dom of doms) {
|
||
|
|
// 从dom对象中获取DL标签
|
||
|
|
if (dom.tagName == 'DL') {
|
||
|
|
let result = textHandle(dom, null);
|
||
|
|
console.log(JSON.stringify(result.children));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 导出为文件
|
||
|
|
*/
|
||
|
|
function exportRaw(name, data) {
|
||
|
|
var urlObject = window.URL || window.webkitURL || window;
|
||
|
|
var export_blob = new Blob([data]);
|
||
|
|
var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
|
||
|
|
save_link.href = urlObject.createObjectURL(export_blob);
|
||
|
|
save_link.download = name;
|
||
|
|
var ev = document.createEvent("MouseEvents");
|
||
|
|
ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||
|
|
save_link.dispatchEvent(ev);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 弹错误信息弹窗
|
||
|
|
*/
|
||
|
|
function alertErr() {
|
||
|
|
alert("请不要上传非谷歌浏览器书签文件")
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* @param dl
|
||
|
|
* @param temp
|
||
|
|
* @returns {*}
|
||
|
|
*/
|
||
|
|
function textHandle(dl, temp) {
|
||
|
|
// 先获取DL 下面的DT
|
||
|
|
let dts = getDts(dl);
|
||
|
|
if (dts.length > 0) {
|
||
|
|
// 判断DT下面是否有DL标签，有则为分类，没有则无主分类
|
||
|
|
for (var i in dts) {
|
||
|
|
let dt = dts[i], hdl = getTag(dt, "DL");
|
||
|
|
if (hdl != null) {
|
||
|
|
let h = getTag(dt, "H3");
|
||
|
|
let returns = textHandle(hdl, {name: h.textContent, children: [], web: []})
|
||
|
|
if (temp == null) {
|
||
|
|
temp = returns;
|
||
|
|
} else {
|
||
|
|
temp.children.push(returns);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
var a = getTag(dt, "A");
|
||
|
|
temp.web.push({
|
||
|
|
url: a.href,
|
||
|
|
title: a.textContent,
|
||
|
|
desc: a.textContent
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return temp;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取dt下面的标签
|
||
|
|
*
|
||
|
|
* @param dl
|
||
|
|
* @return
|
||
|
|
*/
|
||
|
|
function getTag(dt, tagname) {
|
||
|
|
let dtcs = dt.children, obj = null;
|
||
|
|
if (dtcs.length < 1) {
|
||
|
|
return obj
|
||
|
|
}
|
||
|
|
for (let dtc of dtcs) {
|
||
|
|
if ((dtc.tagName.toUpperCase()) == tagname) {
|
||
|
|
obj = dtc;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return obj;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取DL下面的DT标签
|
||
|
|
* @param dl
|
||
|
|
* @returns {[]}
|
||
|
|
*/
|
||
|
|
function getDts(dl) {
|
||
|
|
let dlcs = dl.children, arr = [];
|
||
|
|
if (dlcs.length < 1) {
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
for (let dlc of dlcs) {
|
||
|
|
if ((dlc.tagName.toUpperCase()) == 'DT') {
|
||
|
|
arr.push(dlc)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 把String转为DOM对象
|
||
|
|
* @param str
|
||
|
|
* @returns {NodeListOf<ChildNode>}
|
||
|
|
*/
|
||
|
|
function parseToDOM(str) {
|
||
|
|
let div = document.createElement("div");
|
||
|
|
if (typeof str == "string") {
|
||
|
|
div.innerHTML = str;
|
||
|
|
}
|
||
|
|
return div.childNodes;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</html>
|