文章目錄
- 處理谷歌浏覽器導出書簽為json格式
- 前言
- 網址導航
- 谷歌浏覽器書簽
- 導出書簽
- 原理
- demo
- 代碼
- JavaScript
- Java
- 結尾
處理谷歌浏覽器導出書簽為json格式
最近在發現一個開源的網址導航的開源項目 還不錯， 其實就是一個類似hao123導航類似， 裡面的内容是可以自己自定義的， 這不禁讓我想到可以吧浏覽器的書簽導出來，然後放到項目裡面去就可以把自己收藏的書簽變成一個自己的導航網址，說幹就幹。
開源作者支援部署方式有很多， 是以我這裡就采用VUE開發建構的方式，因為這種相對來說比較簡單，而且不需要部署背景服務, 有一個簡單的NGINX即可
vue項目位址為 接看我的成品(弄得比較随意,能看就行)– ，其中vue有一個
D:\project\WebStack-vue\src\assets\data.json
檔案，這裡面存的就是導航清單所需要的資料， 是以我們本次的目的也就是将谷歌浏覽器導出的書簽,生成一個
data.json
檔案即可,
data.json檔案格式如下:
[
{
"name": "主目錄",
"children": [
{
"name": "子目錄1",
"children": [],
"web": [
{
"url": "",
"title": "",
"desc": "",
"logo": ""
}
]
}
],
"web": [
{
"url": "",
"title": "",
"desc": "",
"logo": ""
}
]
}
]
在設書簽欄點選
書簽管理器
或者直接在浏覽器位址欄輸入
chrome://bookmarks/
可以直接進入到書簽管理,右上角導出書簽就可以得到一個
Bookmark.html
的書簽檔案,其實就是一段簡單的html代碼
既然我們知道書簽其實就是一段簡單的html代碼， 我們就可以直接對html操作，使用js将html裡面的dom對象處理成我們能接受的json格式的字元串就可以滿足我們的需求，具體邏輯請看代碼，不做過多贅述。
代碼又兩個版本， 一個是
Java
版本的，另外一個是
JavaScript
版本的,這裡先展示
JavaScript
版本的
<!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);
exportRaw('data.json', 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,
logo: a.getAttribute("ICON")
})
}
}
}
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>
待完善
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)