前为了把浏览器书签放到博客里维护，特意写了一个 bookmark 转 json/markdown 的小工具：parse-bookmark。

前几天手贱直接把 bookmark 的源文件给删了，这下这么多年收藏整理的书签只有自己博客里的一个 markdown 文件了，毕竟还是直接用浏览器自带的 bookmark 查看会方便好多，只能想办法怎么根据现在的 markdowm 文件转换回 bookmark.html 文件了。

markdown 文件长这样：

# 我的书签bookmark

### 博客
* [我的博客](https://cafehaus.github.io/blog)
* [知乎](https://zhuanlan.zhihu.com/)
* [简书](https://www.jianshu.com/)

### 工具
* [在线图片压缩](https://tinyjpg.com/)
* [TinyPNG – Developer API](https://tinypng.com/developers)
* [在线GIF动图压缩](https://docsmall.com/gif-compress)

...

从谷歌浏览器中导出的书签长这样：

<!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/">简书</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动图压缩</A>
        </DL><p>
    </DL><p>
</DL><p>

所以现在需要做的就是怎么能更快速地从上面的 markdown 文件转换成下面的 html 格式文件，注意这里的 html 文件和我们平时前端开发里写的 html 还有点不太一样。

转换步骤：

1、复制 markdown 里的每一条书签

刚开始本来是打算自己手动一个一个复制过来修改的，先把主要内容和格式搞过来，这一步完成后大概长这样，大部分工作都是复制粘贴，还算比较轻松：

<!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/)
            * [简书](https://www.jianshu.com/)
        </DL><p>
    </DL><p>
</DL><p>

2、替换每条书签的开始部分

这一步直接用开发工具的全局替换就行了，将 * [ 替换成 DT 和 A 标签，A 标签的 HREF 属性先默认为空，等后面再处理：

<!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="">简书](https://www.jianshu.com/)
        </DL><p>
    </DL><p>
</DL><p>

3、替换 A 标签的 HREF 属性

刚开始我也是自己一个一个手动先选中 ctrl x 剪切掉后面的地址，然后粘贴到前面的 HREF 里，大概剪切粘贴了1/3实在觉得这样效率太慢了，也没心思再剪切粘贴了。

然后就开始来写个脚本直接用正则替换内容，无非就是用正则匹配出来后面的地址然后放到 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 行代码就搞定了，果然科技才是第一生产力，几个小时的手工活用代码1秒钟搞定！

注意因为转换的数据里没有设置 icon 这个属性，所以默认在书签里打开前面的图标默认都是灰色的，只要访问当前书签后，浏览器会自动更新前面的小 icon 的。

己平常发现好的工具就喜欢收藏，使用了Chrome之后，发现了一些不错的插件，今天就来为大家推荐一些还不错的Charome书签类插件，它们有的小而美，有的很精致，有的很贴心，总之不会让大家失望。

Holmes

Holmes是一款书签搜索工具，当你的书签堆满山的时候，还有不同文件夹，这时候发现Holmes真的很用心，提供了两种搜索书签方式。

使用Alt + Shift + H即可搜索书签；

当然你也可以在搜索框中输入* + Tab来搜索；

Deway

Dewey是一款Chrome开源书签管理插件，它提供了三种搜索类型（title，tag，url），当然你也可以对书签添加Tag。

Owlmark

Owlmark是一款简洁小巧的Chrome插件，它虽然没有多余的功能，但是对原有的功能进行优化，比如多层文件夹，折叠在最顶部；提供了网址的缩略图，并且可以将书签Twitter，Facebook，G+。

Diigo

Diigo是一款社会化书签工具，它的功能不得不说很全，不仅有保存书签，截图，对该网页进行注解，而且可以自定义文件夹和标签；而且是全平台支持。

Delicious Bookmarks Extension

作为社会化书签工具的鼻祖，刚创立之初被寄予很大的期望，后来被创始人抛弃，后来被后起之秀追赶；当然，它在创立之初积累了不少用户，而它最大的特点就是社交化，可以查看热门收藏的书签。

Listango Bookmark Manager

Listango算是中规中举的，没有太多亮点，但也没有太多花哨，很简约。

Bundlr

Bundlr还是比较偏社交化，添加书签可以选择精准的类型，所以你也可以浏览公开的书签，类似Pinterest。

Kippt

对于Kippt，不仅仅只有基本的功能，还有很多很贴心的设计。

比如添加书签的时候可以直接发送到Twitter和Facebook；

K + Tab来搜索自己的Kippt书签；

比如对书签的描述支持Markdown语法；

可以关联Github，Twitter，Facebook，Dribbble帐号，也可以查看你关注人保存的书签，上面有很多名人在使用，而且会发现一些好的资源；

Raindrop.io

Raindrop.io是一款书签管理工具，把它放在最后是因为它真的很赞，我第一次看到就深深被它吸引了，它的全平台支持Material Design，让我忍不住为它点了32个赞；除了设计的独特之处，它的功能大而全。

保存不同类型的，比如网址，图片，视频。

可以导入Pocket，Instapaper，Readability，Kippt，Delicious等Html文件的书签。

多平台支持和各种浏览器插件。

Pro版本提供了备份到Dropbox。

提供了一些不同专题可以订阅。