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