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

前为了把浏览器书签放到博客里维护，特意写了一个 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 的。

js中，我们经常会需要将某些字符串替换成指定的字符串，这是可以使用`replace()`方法，它不仅支持使用字符串替换，还能用正则替换

1. 定义：

/**

 * @param regexp/substr 被替换的字符串或 RegExp 对象，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象

 * @param replacement 替换文本或生成替换文本的函数

 * @return 一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的

 **/

stringObject.replace(regexp/substr,replacement)

如果第一个参数是一个正则，就会查找与 regexp 相匹配的子字符串，然后用 `replacement` 来替换这些子串。如果 `regexp` 具有全局标志 g，那么 `replace()` 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。如果`replacement`是一个函数，那么这个函数的返回值就会作为替换文本。如果`replacement`是一个字符串，那么字符串中的$字符是有特殊含义的：

、、...、与 regexp 中的第 1 到第 99 个子表达式相匹配的文本
$& 与 regexp 相匹配的子串
$` 位于匹配子串左侧的文本
$' 位于匹配子串右侧的文本
$$ 直接量符号

2. 例子

1. 把'Jack'替换成'World'

var str="Hello Jack!"

str.replace(/Jack/, "World")  // Hello World

2. 使用正则全局替换，把所有的'COVID-19'替换成'XXX'

var str = "People with COVID-19 have had a wide range of symptoms reported – ranging from mild symptoms to severe illness. Symptoms may appear 2-14 days after exposure to the virus. People with these symptoms may have COVID-19:"

str.replace(/COVID\-19/g, "XXX")

// People with XXX have had a wide range of symptoms reported – ranging from mild symptoms to severe illness. Symptoms may appear 2-14 days after exposure to the virus. People with these symptoms may have XXX:

3. 正则查找替换时忽略字母大小写

var str = "javascript Tutorial";

str.replace(/javascript/i, "JavaScript");

4. 把'Jack, hi'替换成‘Hi, Jack’

var str = "Jack, Hi";

str.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

5. 把双引号替换成单引号

var str = '"a", "b"';

str.replace(/"([^"]*)"/g, "'$1'");

6. 把字符串中所有单词的首字母都转换为大写

级批量文本替换是一款界面简洁易用，功能强大实用的文本替换工具。支持多级目录同时替换，支持大小写匹配，支持文件备份，支持文件查找，智能历史替换方案记录以及智能备份文件批量还原系统，让文本查找、批量查找、替换、批量替换、重复查找替换及批量备份还原更轻松，软件特有的文件检索引擎，使文件检索速度极快，自带简洁高效文本编辑功能，让你的文本修改更加得心应手，高效跟踪引擎以及完善的操作报表，让操作结果清晰明了。

软件特色

1、文本替换的利器，批量文本替换的不二之选，站长必备，挂马网页杀手，

2、支持所有纯ANSI文件，支持GBK/Unicode/UTF8编码的htm、html、asp、java、php等文件

3、可自定义所支持的文件类型

4、支持16进制替换

5、支持单行和多行以及段落替换

6、支持特征替换和提取

7、支持正则替换

8、支持多规则同时替换并可以行导入规则，智能规则排序功能，

9、支持多级目录、大小写匹配、支持备份和恢复，替换速度快。

1、段落文字的批量替换
①点击工具栏上的“＋文件”按钮，选定要替换的文本，比如示例文本.txt，在“查找内容”项目的“替换源目标”选项夹中输入“shebaodan”，在“替换内容”项目中输入“baidu”，点击开始，于是，会看到原来文本中的“shebaodan”全部被“baidu”字样替换

②对于在多个文件中进行替换，可以点击“＋文件夹”按钮，指定某文件夹，输入要查找的文字或者句子段落，输入替换内容，点击开始搞定。
“多内容替换”选择后，会在右边显示一个文本框和绿色“＋”标志，点击“＋”，弹出“多重替换设置”属性框，比如对“示例文本.txt”中的“多多”字样改成“shebaodan”，对“www”改成“网站”，将这些信息分别写入“替换目标”、“替换内容”中，默认情况下是“一般替换规则”，输入四项后，选择“保存规则”，关闭该窗口，此时，在原来的“查找内容”、“替换内容”不再能操作了，取代它的是刚才我们定义的那条“规则”

2、特征字符串之间的批量替换
①对文件中一对字符串所划定的区域进行处理，对于网页、编程源文件、这些文件的特点就是看上去非常的繁琐，不容易查询关键字等，比如txt、htm、c、h、cpp、asp、cpp、java等。通过点击工具栏上的“配置”，可以看到默认支持的文件类型，而且还可以“增加”进行定义没有的格式，同时，确定输出的方式，是直接在源文件上进行还是另外存储到别处

②点击工具栏上的“特征替换”，在源目标区添加文件或文件夹，比如打开一个htm文件，想将“<div,”中对应的内容去掉,在“起始特征字符串”中输入“<div”,在“结束特征字符串”中输入“”，“替换内容”中不需要输入，最终结果是搜索全文删除它们之间的内容。同样也可以更换其他内容，只要在“替换内容”中输入相应的信息就可以了

3.正则式替换，这个是最快处理文本和网页的高级手段下面演示替换掉所有html标签获得网页里面的存文本

替换成功后的效果，相信在大家在平常工作或者做自媒体的过程中肯定用得上，比如文章采集，关键词收集等等都用得上

在线咨询

上一篇：使用 WebGL 为 HTML5 游戏创建逼真的地形
下一篇：网页文字复制不了？学会这5个方法，全网内容任你复制

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。