日常平凡在PC上积累了不少Chrome书签,一向愿望能在其他地方运用,但在导出到别的浏览器,尤其是手机浏览器的时刻碰到不少难题。虽然能够经由过程谷歌账号同步书签,然则因为总所周知的缘由,存在诸多不便。因而写了个小顺序,将chrome的html书签剖析成json花样,轻易拓展运用。
具体步骤
在chrome书签管理器页面导出html花样书签;
因为导出的html花样存在许多未闭合的标签,为轻易以后的操纵,运用chrome翻开书签html文件;
chrome会自动补齐标签,挪用开发者东西,将html复制保留;
运用NodeJS剖析书签html文件。
html书签
补齐前书签是如许的,DT标签,p标签都未闭合
<DL><p>
<DT><H3 ADD_DATE="1446270688" LAST_MODIFIED="1475726879">书签栏</H3>
<DL><p>
<DT><A HREF="https://github.com/" ADD_DATE="1469689056">GitHub</A>
<DL><p>
</DL><p>
补齐标签后的html
<dl><p></p>
<dt>
<h3 add_date="1446270688" last_modified="1475726879">书签栏</h3>
<dl><p></p>
<dt><a href="https://github.com/" add_date="1469689056">GitHub</a></dt>
</dl>
</dt>
</dl><p></p>
NodeJS顺序
运用cheerio来实行dom操纵,实行步骤
起首,读取补齐后的html书签;
取得最外层dt元素
从最外层dt元素最先遍历dom树,个中h3标签为文件夹称号,A标签包括书签称号、书签地点等信息;
将书签和文件夹存储为对象,统一文件夹下的书签和文件夹对象的鸠合存储为数组;
将终究的对象转化为json字符串,存储到json文件
var cheerio = require('cheerio'),
fs = require('fs');
// 读取书签html文件
fs.readFile('bookmarks.html', 'utf-8',function(err,data){
if(err){
console.log("error");
}else{
parse(data);
}
});
function parse(html){
// 加载html,运用经常使用的$标记
var $ = cheerio.load(html);
// 猎取最外层的dt标签
var $dl = $("dl").first();
var $dt = $dl.children("dt").eq(0);
// 从dt最先遍历dom树,天生对象
var obj = foo($dt);
// 将对象转化为json字符串,增加分外参数使json花样更容易浏览
var s = JSON.stringify(obj, null, 4);
// 将json字符串写入json文件
fs.writeFileSync('output.json', s);
function foo($dt){
// h3标签为文件夹称号
var $h3 = $dt.children("h3");
if($h3.length == 0){
// a标签为网址
var $a = $dt.children("a");
// 返回该书签的称号和网址构成的对象
return $a.length > 0 ? {"name": $a.text(),"href": $a.attr('href')} : null;
}
var h3 = $h3.text();
var arr = [];
var obj = {};
// 猎取下一级dt标签鸠合
var $dl = $dt.children("dl");
var $dtArr = $dl.children("dt");
for(var i = 0; i < $dtArr.length; i++){
// 遍历下一级dt标签
var tmp = foo($dtArr.eq(i));
// 将返回的对象push至子文件数组
arr.push(tmp);
}
// 建立文件夹与子文件数组的键值对
obj[h3] = arr;
// 返回该对象
return obj;
}
}
json文件
{
"书签栏": [
{
"name": "GitHub",
"href": "https://github.com/"
},
{
"name": "RequireJS 中文网",
"href": "http://www.requirejs.cn/home.html"
},
{
"name": "(2 封私信 / 99+ 条音讯) 首页 - 知乎",
"href": "https://www.zhihu.com/"
},
{
"name": "慕课网(IMOOC)-国内最大的IT妙技进修平台",
"href": "http://www.imooc.com/"
}
]
}