根据markdown文件反向转换成chrome浏览器书签html

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

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

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

markdown 文件长这样:

# 我的书签bookmark

### 博客
* [我的博客](https://EXAMPLE_URL/blog)
* [某乎](https://EXAMPLE_URL)
* [某书](https://EXAMPLE_URL)

### 工具
* [在线图片压缩](https://EXAMPLE_URL)
* [TinyPNG – Developer API](https://EXAMPLE_URL)
* [在线GIF动图压缩](https://EXAMPLE_URL)

...

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

<!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://EXAMPLE_URL/blog">我的博客</A>
            <DT><A HREF="https://EXAMPLE_URL/">某乎</A>
            <DT><A HREF="https://EXAMPLE_URL/">某书</A>
        </DL><p>
        <DT><H3 ADD_DATE="1692858766" LAST_MODIFIED="1692859444">工具</H3>
        <DL><p>
            <DT><A HREF="https://EXAMPLE_URL/" ADD_DATE="1692858571">在线图片压缩]</A>
            <DT><A HREF="https://EXAMPLE_URL/developers" ADD_DATE="1692858571">TinyPNG – Developer API</A>
            <DT><A HREF="https://EXAMPLE_URL" 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://EXAMPLE_URL/blog/)
            * [某乎](https://EXAMPLE_URL/)
            * [某书](https://EXAMPLE_URL/)
        </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://EXAMPLE_URL/blog/)
            <DT><A HREF="">某乎](https://EXAMPLE_URL/)
            <DT><A HREF="">某书](https://EXAMPLE_URL/)
        </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秒钟搞定!
1.png

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

相关文章
|
3月前
|
机器学习/深度学习 人工智能 文字识别
Zerox:AI驱动的万能OCR工具,精准识别复杂布局并输出Markdown格式,支持PDF、DOCX、图片等多种文件格式
Zerox 是一款开源的本地化高精度OCR工具,基于GPT-4o-mini模型,支持PDF、DOCX、图片等多种格式文件,能够零样本识别复杂布局文档,输出Markdown格式结果。
326 4
Zerox:AI驱动的万能OCR工具,精准识别复杂布局并输出Markdown格式,支持PDF、DOCX、图片等多种文件格式
|
4月前
|
人工智能 文字识别 数据挖掘
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
MarkItDown 是微软开源的多功能文档转换工具,支持将 PDF、PPT、Word、Excel、图像、音频等多种格式的文件转换为 Markdown 格式,具备 OCR 文字识别、语音转文字和元数据提取等功能。
750 9
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
|
5月前
|
移动开发 前端开发 JavaScript
HTML5 浏览器支持1
现代浏览器普遍支持HTML5,但早期浏览器可能不支持。可以通过将HTML5元素定义为块级元素,使旧版浏览器也能正确显示。例如,可以使用CSS将header、section等8个新的HTML5语义元素设置为块级元素。此外,还可以通过JavaScript为HTML添加新的自定义元素,如使用`document.createElement(&quot;myHero&quot;)`为IE浏览器添加新元素。
|
5月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
4086 2
|
5月前
|
程序员
【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)
作为程序员我们经常会看到README.md这种说明文件,以.md为后缀的文件就是我们所说的Markdown的文件。
779 4
|
6月前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
161 4
|
6月前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
500 2
|
5月前
|
存储 移动开发 前端开发
|
6月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
687 0
|
8月前
写一个HTML文件
【8月更文挑战第27天】写一个HTML文件。
86 1

热门文章

最新文章

下一篇
oss创建bucket