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

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

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

# 我的書(shū)簽bookmark

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

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

...

從谷歌瀏覽器中導(dǎo)出的書(shū)簽長(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">書(shū)簽欄</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)書(shū)</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í)前端開(kāi)發(fā)里寫(xiě)的 html 還有點(diǎn)不太一樣。

轉(zhuǎn)換步驟：

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

剛開(kāi)始本來(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">書(shū)簽欄</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)書(shū)](https://www.jianshu.com/)
        </DL><p>
    </DL><p>
</DL><p>

2、替換每條書(shū)簽的開(kāi)始部分

這一步直接用開(kāi)發(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">書(shū)簽欄</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)書(shū)](https://www.jianshu.com/)
        </DL><p>
    </DL><p>
</DL><p>

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

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

然后就開(kāi)始來(lái)寫(xiě)個(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ù)里沒(méi)有設(shè)置 icon 這個(gè)屬性，所以默認(rèn)在書(shū)簽里打開(kāi)前面的圖標(biāo)默認(rèn)都是灰色的，只要訪問(wèn)當(dāng)前書(shū)簽后，瀏覽器會(huì)自動(dòng)更新前面的小 icon 的。

己平常發(fā)現(xiàn)好的工具就喜歡收藏，使用了Chrome之后，發(fā)現(xiàn)了一些不錯(cuò)的插件，今天就來(lái)為大家推薦一些還不錯(cuò)的Charome書(shū)簽類(lèi)插件，它們有的小而美，有的很精致，有的很貼心，總之不會(huì)讓大家失望。

Holmes

Holmes是一款書(shū)簽搜索工具，當(dāng)你的書(shū)簽堆滿(mǎn)山的時(shí)候，還有不同文件夾，這時(shí)候發(fā)現(xiàn)Holmes真的很用心，提供了兩種搜索書(shū)簽方式。

使用Alt + Shift + H即可搜索書(shū)簽；

當(dāng)然你也可以在搜索框中輸入* + Tab來(lái)搜索；

Deway

Dewey是一款Chrome開(kāi)源書(shū)簽管理插件，它提供了三種搜索類(lèi)型（title，tag，url），當(dāng)然你也可以對(duì)書(shū)簽添加Tag。

Owlmark

Owlmark是一款簡(jiǎn)潔小巧的Chrome插件，它雖然沒(méi)有多余的功能，但是對(duì)原有的功能進(jìn)行優(yōu)化，比如多層文件夾，折疊在最頂部；提供了網(wǎng)址的縮略圖，并且可以將書(shū)簽Twitter，F(xiàn)acebook，G+。

Diigo

Diigo是一款社會(huì)化書(shū)簽工具，它的功能不得不說(shuō)很全，不僅有保存書(shū)簽，截圖，對(duì)該網(wǎng)頁(yè)進(jìn)行注解，而且可以自定義文件夾和標(biāo)簽；而且是全平臺(tái)支持。

Delicious Bookmarks Extension

作為社會(huì)化書(shū)簽工具的鼻祖，剛創(chuàng)立之初被寄予很大的期望，后來(lái)被創(chuàng)始人拋棄，后來(lái)被后起之秀追趕；當(dāng)然，它在創(chuàng)立之初積累了不少用戶(hù)，而它最大的特點(diǎn)就是社交化，可以查看熱門(mén)收藏的書(shū)簽。

Listango Bookmark Manager

Listango算是中規(guī)中舉的，沒(méi)有太多亮點(diǎn)，但也沒(méi)有太多花哨，很簡(jiǎn)約。

Bundlr

Bundlr還是比較偏社交化，添加書(shū)簽可以選擇精準(zhǔn)的類(lèi)型，所以你也可以瀏覽公開(kāi)的書(shū)簽，類(lèi)似Pinterest。

Kippt

對(duì)于Kippt，不僅僅只有基本的功能，還有很多很貼心的設(shè)計(jì)。

比如添加書(shū)簽的時(shí)候可以直接發(fā)送到Twitter和Facebook；

K + Tab來(lái)搜索自己的Kippt書(shū)簽；

比如對(duì)書(shū)簽的描述支持Markdown語(yǔ)法；

可以關(guān)聯(lián)Github，Twitter，F(xiàn)acebook，Dribbble帳號(hào)，也可以查看你關(guān)注人保存的書(shū)簽，上面有很多名人在使用，而且會(huì)發(fā)現(xiàn)一些好的資源；

Raindrop.io

Raindrop.io是一款書(shū)簽管理工具，把它放在最后是因?yàn)樗娴暮苜潱业谝淮慰吹骄蜕钌畋凰耍娜脚_(tái)支持Material Design，讓我忍不住為它點(diǎn)了32個(gè)贊；除了設(shè)計(jì)的獨(dú)特之處，它的功能大而全。

保存不同類(lèi)型的，比如網(wǎng)址，圖片，視頻。

可以導(dǎo)入Pocket，Instapaper，Readability，Kippt，Delicious等Html文件的書(shū)簽。

多平臺(tái)支持和各種瀏覽器插件。

Pro版本提供了備份到Dropbox。

提供了一些不同專(zhuān)題可以訂閱。