書簽轉(zhuǎn)json格式代碼（chrome,edge...）

前書簽導(dǎo)出大部分都是html,此代碼可以將書簽提取為json格式。

1：導(dǎo)出書簽為html文件

2：在文件中加入以下代碼，可自行根據(jù)需要編輯修改

3：在控制臺(tái)第一行復(fù)制json文本

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

前為了把瀏覽器書簽放到博客里維護(hù)，特意寫了一個(gè) bookmark 轉(zhuǎn) json/markdown 的小工具：parse-bookmark。

前幾天手賤直接把 bookmark 的源文件給刪了，這下這么多年收藏整理的書簽只有自己博客里的一個(gè) markdown 文件了，畢竟還是直接用瀏覽器自帶的 bookmark 查看會(huì)方便好多，只能想辦法怎么根據(jù)現(xiàn)在的 markdowm 文件轉(zhuǎn)換回 bookmark.html 文件了。

markdown 文件長(zhǎng)這樣：

# 我的書簽bookmark

### 博客
* [我的博客](https://cafehaus.github.io/blog)
* [知乎](https://zhuanlan.zhihu.com/)
* [簡(jiǎn)書](https://www.jianshu.com/)

### 工具
* [在線圖片壓縮](https://tinyjpg.com/)
* [TinyPNG – Developer API](https://tinypng.com/developers)
* [在線GIF動(dòng)圖壓縮](https://docsmall.com/gif-compress)

...

從谷歌瀏覽器中導(dǎo)出的書簽長(zhǎng)這樣：

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
    <DT><H3 ADD_DATE="1691296878" LAST_MODIFIED="1692859249" PERSONAL_TOOLBAR_FOLDER="true">書簽欄</H3>
    <DL><p>
        <DT><H3 ADD_DATE="1692858364" LAST_MODIFIED="1692858643">博客</H3>
        <DL><p>
            <DT><A HREF="https://cafehaus.github.io/blog">我的博客</A>
            <DT><A HREF="https://zhuanlan.zhihu.com/">知乎</A>
            <DT><A HREF="https://www.jianshu.com/">簡(jiǎn)書</A>
        </DL><p>
        <DT><H3 ADD_DATE="1692858766" LAST_MODIFIED="1692859444">工具</H3>
        <DL><p>
            <DT><A HREF="https://tinyjpg.com/" ADD_DATE="1692858571">在線圖片壓縮]</A>
            <DT><A HREF="https://tinypng.com/developers" ADD_DATE="1692858571">TinyPNG – Developer API</A>
            <DT><A HREF="https://docsmall.com/gif-compress" ADD_DATE="1692858571">在線GIF動(dòng)圖壓縮</A>
        </DL><p>
    </DL><p>
</DL><p>

所以現(xiàn)在需要做的就是怎么能更快速地從上面的 markdown 文件轉(zhuǎn)換成下面的 html 格式文件，注意這里的 html 文件和我們平時(shí)前端開發(fā)里寫的 html 還有點(diǎn)不太一樣。

轉(zhuǎn)換步驟：

1、復(fù)制 markdown 里的每一條書簽

剛開始本來(lái)是打算自己手動(dòng)一個(gè)一個(gè)復(fù)制過(guò)來(lái)修改的，先把主要內(nèi)容和格式搞過(guò)來(lái)，這一步完成后大概長(zhǎng)這樣，大部分工作都是復(fù)制粘貼，還算比較輕松：

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<!-- This is an automatically generated file.
     It will be read and overwritten.
     DO NOT EDIT! -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
    <DT><H3 ADD_DATE="1691296878" LAST_MODIFIED="1692859249" PERSONAL_TOOLBAR_FOLDER="true">書簽欄</H3>
    <DL><p>
        <DT><H3 ADD_DATE="1692858364" LAST_MODIFIED="1692858643">博客</H3>
        <DL><p>
            * [我的博客](https://cafehaus.github.io/blog/)
            * [知乎](https://zhuanlan.zhihu.com/)
            * [簡(jiǎn)書](https://www.jianshu.com/)
        </DL><p>
    </DL><p>
</DL><p>

2、替換每條書簽的開始部分

這一步直接用開發(fā)工具的全局替換就行了，將 * [ 替換成 DT 和 A 標(biāo)簽，A 標(biāo)簽的 HREF 屬性先默認(rèn)為空，等后面再處理：

<!DOCTYPE NETSCAPE-Bookmark-file-1>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<TITLE>Bookmarks</TITLE>
<H1>Bookmarks</H1>
<DL><p>
    <DT><H3 ADD_DATE="1691296878" LAST_MODIFIED="1692859249" PERSONAL_TOOLBAR_FOLDER="true">書簽欄</H3>
    <DL><p>
        <DT><H3 ADD_DATE="1692858364" LAST_MODIFIED="1692858643">博客</H3>
        <DL><p>
            <DT><A HREF="">我的博客](https://cafehaus.github.io/blog/)
            <DT><A HREF="">知乎](https://zhuanlan.zhihu.com/)
            <DT><A HREF="">簡(jiǎn)書](https://www.jianshu.com/)
        </DL><p>
    </DL><p>
</DL><p>

3、替換 A 標(biāo)簽的 HREF 屬性

剛開始我也是自己一個(gè)一個(gè)手動(dòng)先選中 ctrl x 剪切掉后面的地址，然后粘貼到前面的 HREF 里，大概剪切粘貼了1/3實(shí)在覺得這樣效率太慢了，也沒心思再剪切粘貼了。

然后就開始來(lái)寫個(gè)腳本直接用正則替換內(nèi)容，無(wú)非就是用正則匹配出來(lái)后面的地址然后放到 HREF 里去：

const fs = require('node:fs')
const path = require('node:path')

fs.readFile(path.join(__dirname, './bookmarks_2023_8_24.html'), 'utf-8', async (err, data) => {
    if (err) return console.error(err)
    const reg = /<DT><A HREF="">([A-Za-z0-9\u4e00-\u9fa5.-–-—+_~:·,!?#？?’'??：、，；。！|【】\[\]\$￥\(\)（）「」&《》\s  ?]*)\]\((http\S+)\)<\/A>/g
    const text = data.replaceAll(reg, '<DT><A HREF="$2">$1</A>')

    fs.writeFile(path.join(__dirname, './bookmarks.html'), text, (err, data) => {
        if (err) return console.error(err)
        console.log('success')
    })
})

總共也就 13 行代碼就搞定了，果然科技才是第一生產(chǎn)力，幾個(gè)小時(shí)的手工活用代碼1秒鐘搞定！

注意因?yàn)檗D(zhuǎn)換的數(shù)據(jù)里沒有設(shè)置 icon 這個(gè)屬性，所以默認(rèn)在書簽里打開前面的圖標(biāo)默認(rèn)都是灰色的，只要訪問(wèn)當(dāng)前書簽后，瀏覽器會(huì)自動(dòng)更新前面的小 icon 的。

法

用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。
嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）。
對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)。
不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規(guī)范中明確說(shuō)明這是可選的。
不要省略可選的結(jié)束標(biāo)簽（closing tag）（例如，</li> 或 </body>）。

實(shí)例：

<!DOCTYPE html><html>

HTML5 doctype

為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。

實(shí)例：

<!DOCTYPE html><html>

語(yǔ)言屬性

根據(jù) HTML5 規(guī)范：

強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語(yǔ)言。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。

lang 屬性的知識(shí)可以從此規(guī)范中了解。

這里列出了語(yǔ)言代碼表。

<html lang="zh-CN">

IE 兼容模式

IE 支持通過(guò)特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符編碼

通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

引入 CSS 和 JavaScript 文件

根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。

HTML5 spec links

Using link
Using style
Using script

<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>

實(shí)用為王

盡量遵循 HTML 標(biāo)準(zhǔn)和語(yǔ)義，但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。

屬性順序

HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class 用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（例如，頁(yè)面內(nèi)的書簽），因此排在第二位。

<a class="..." id="..." data-modal="toggle" href="#">

布爾（boolean）型屬性

布爾型屬性可以在聲明時(shí)不賦值。XHTML 規(guī)范要求為其賦值，但是 HTML5 規(guī)范不需要。

更多信息請(qǐng)參考 WhatWG section on boolean attributes：

元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

如果一定要為其賦值的話，請(qǐng)參考 WhatWG 規(guī)范：

如果屬性存在，其值必須是空字符串或 [...] 屬性的規(guī)范名稱，并且不要在首尾添加空白符。

簡(jiǎn)單來(lái)說(shuō)，就是不用賦值。

<input type="text" disabled><input type="checkbox" value="1" checked><select>

減少標(biāo)簽的數(shù)量

編寫 HTML 代碼時(shí)，盡量避免多余的父元素。很多時(shí)候，這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn)。請(qǐng)看下面的案例：

<!-- Not so great --><span class="avatar">

JavaScript 生成的標(biāo)簽

通過(guò) JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時(shí)盡量避免。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：公務(wù)員報(bào)名序號(hào)是什么意思？忘記報(bào)名序號(hào)該怎么辦？
下一篇：Vue3.0桌面端聊天｜vue3仿微信/QQ網(wǎng)頁(yè)版聊天實(shí)例

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

書簽轉(zhuǎn)json格式代碼（chrome,edge...）

1、復(fù)制 markdown 里的每一條書簽

2、替換每條書簽的開始部分

3、替換 A 標(biāo)簽的 HREF 屬性

您的項(xiàng)目需求