使用PHP开发的简约导航/书签管理系统。
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

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