Y Blog

Appearance

谷歌书签转json

🕒 Published at:

将书签从HTML提取为JSON格式 ​

步骤一：导出书签为HTML文件 ​

从浏览器中导出书签，保存为HTML文件。

步骤二：在HTML文件中加入以下代码 ​

将以下代码添加到书签HTML文件中，保存并打开文件，然后在控制台中查看输出的JSON数据。

html
<!DOCTYPE html>
<html>
<head>
    <title>书签导出</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var rootTag = $("DL").eq(0);
            getAll(rootTag, json);
            console.log(JSON.stringify(json));
            console.log(json);
        });

        var json = [];

        function getAll(tag, datas) {
            $.each($(tag).children("dt"), function(index, item) {
                if ($(item).children(":has(a)").length == 0) {
                    datas.push({
                        name: $(item).children("a").html(),
                        href: $(item).children("a").attr("href"),
                    });
                } else {
                    var ssd = {
                        name: $(item).children("h3").html(),
                        children: []
                    };
                    datas.push(ssd);
                    $.each($(item).children("dl"), function(index, item2) {
                        getAll(item2, ssd.children);
                    });
                }
            });
        }
    </script>
</head>
<body>
    <!-- 这里粘贴导出的书签HTML内容 -->
</body>
</html>

在控制台第一行可以复制JSON文本。

使用纯JavaScript实现 ​

以下是如何使用纯JavaScript实现相同功能的代码：

javascript
document.addEventListener('DOMContentLoaded', function() {
    var rootTag = document.querySelector('DL');
    var json = [];
    getAll(rootTag, json);
    console.log(JSON.stringify(json));
    console.log(json);
});

function getAll(tag, datas) {
    var dtElements = tag.querySelectorAll(':scope > dt');
    dtElements.forEach(function(item) {
        var hasLink = item.querySelector(':scope > a');
        if (hasLink) {
            datas.push({
                name: hasLink.innerHTML,
                href: hasLink.getAttribute('href'),
            });
        } else {
            var ssd = {
                name: item.querySelector(':scope > h3').innerHTML,
                children: []
            };
            datas.push(ssd);
            var dlElements = item.querySelectorAll(':scope > dl');
            dlElements.forEach(function(item2) {
                getAll(item2, ssd.children);
            });
        }
    });
}

读取文件 ​

使用FileReader读取HTML文件：

javascript
const reader = new FileReader();

reader.onload = (e) => {
    const html = e.target.result;
    parseHTML(html);
};

reader.readAsText(file);

解析成DOM元素 ​

使用DOMParser解析HTML：

javascript
function parseHTML(html) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    var rootTag = doc.querySelector('DL');
    var json = [];
    getAll(rootTag, json);
    console.log(JSON.stringify(json));
    console.log(json);
}

获取直接子元素 ​

使用JavaScript获取直接子元素：

javascript
const dtElements = parentElement.querySelectorAll(':scope > dt');

检查子元素中是否包含指定元素 ​

使用JavaScript检查子元素中是否包含指定元素：

javascript
const hasLink = itemElement.querySelector(':scope > :has(a)');

获取元素的HTML内容 ​

使用innerHTML获取元素的HTML内容：

javascript
const linkHTML = item.querySelector(':scope > a').innerHTML;

确保对象为可迭代对象 ​

确保对象为可迭代对象（如NodeList转换为数组）：

javascript
Array.from(dtElements).forEach(function(item) {
    // 迭代处理代码
});