根據(jù)markdown文件反向轉(zhuǎn)換成chrome瀏覽器書簽html

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

前幾天手賤直接把 bookmark 的源文件給刪了，這下這么多年收藏整理的書簽只有自己博客里的一個(gè) markdown 文件了，畢竟還是直接用瀏覽器自帶的 bookmark 查看會(huì)方便好多，只能想辦法怎么根據(jù)現(xiàn)在的 markdowm 文件轉(zhuǎn)換回 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動(dòng)圖壓縮](https://docsmall.com/gif-compress)

...

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

<!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動(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 里的每一條書簽

剛開始本來是打算自己手動(dòng)一個(gè)一個(gè)復(fù)制過來修改的，先把主要內(nèi)容和格式搞過來，這一步完成后大概長這樣，大部分工作都是復(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/)
            * [簡書](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="">簡書](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í)在覺得這樣效率太慢了，也沒心思再剪切粘貼了。

然后就開始來寫個(gè)腳本直接用正則替換內(nè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)都是灰色的，只要訪問當(dāng)前書簽后，瀏覽器會(huì)自動(dòng)更新前面的小 icon 的。

js中，我們經(jīng)常會(huì)需要將某些字符串替換成指定的字符串，這是可以使用`replace()`方法，它不僅支持使用字符串替換，還能用正則替換

1. 定義：

/**

 * @param regexp/substr 被替換的字符串或 RegExp 對(duì)象，如果該值是一個(gè)字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉(zhuǎn)換為 RegExp 對(duì)象

 * @param replacement 替換文本或生成替換文本的函數(shù)

 * @return 一個(gè)新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的

 **/

stringObject.replace(regexp/substr,replacement)

如果第一個(gè)參數(shù)是一個(gè)正則，就會(huì)查找與 regexp 相匹配的子字符串，然后用 `replacement` 來替換這些子串。如果 `regexp` 具有全局標(biāo)志 g，那么 `replace()` 方法將替換所有匹配的子串。否則，它只替換第一個(gè)匹配子串。如果`replacement`是一個(gè)函數(shù)，那么這個(gè)函數(shù)的返回值就會(huì)作為替換文本。如果`replacement`是一個(gè)字符串，那么字符串中的$字符是有特殊含義的：

、、...、與 regexp 中的第 1 到第 99 個(gè)子表達(dá)式相匹配的文本
$& 與 regexp 相匹配的子串
$` 位于匹配子串左側(cè)的文本
$' 位于匹配子串右側(cè)的文本
$$ 直接量符號(hào)

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. 正則查找替換時(shí)忽略字母大小寫

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. 把雙引號(hào)替換成單引號(hào)

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

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

6. 把字符串中所有單詞的首字母都轉(zhuǎn)換為大寫

級(jí)批量文本替換是一款界面簡潔易用，功能強(qiáng)大實(shí)用的文本替換工具。支持多級(jí)目錄同時(shí)替換，支持大小寫匹配，支持文件備份，支持文件查找，智能歷史替換方案記錄以及智能備份文件批量還原系統(tǒng)，讓文本查找、批量查找、替換、批量替換、重復(fù)查找替換及批量備份還原更輕松，軟件特有的文件檢索引擎，使文件檢索速度極快，自帶簡潔高效文本編輯功能，讓你的文本修改更加得心應(yīng)手，高效跟蹤引擎以及完善的操作報(bào)表，讓操作結(jié)果清晰明了。

軟件特色

1、文本替換的利器，批量文本替換的不二之選，站長必備，掛馬網(wǎng)頁殺手，

2、支持所有純ANSI文件，支持GBK/Unicode/UTF8編碼的htm、html、asp、java、php等文件

3、可自定義所支持的文件類型

4、支持16進(jìn)制替換

5、支持單行和多行以及段落替換

6、支持特征替換和提取

7、支持正則替換

8、支持多規(guī)則同時(shí)替換并可以行導(dǎo)入規(guī)則，智能規(guī)則排序功能，

9、支持多級(jí)目錄、大小寫匹配、支持備份和恢復(fù)，替換速度快。

1、段落文字的批量替換
①點(diǎn)擊工具欄上的“＋文件”按鈕，選定要替換的文本，比如示例文本.txt，在“查找內(nèi)容”項(xiàng)目的“替換源目標(biāo)”選項(xiàng)夾中輸入“shebaodan”，在“替換內(nèi)容”項(xiàng)目中輸入“baidu”，點(diǎn)擊開始，于是，會(huì)看到原來文本中的“shebaodan”全部被“baidu”字樣替換

②對(duì)于在多個(gè)文件中進(jìn)行替換，可以點(diǎn)擊“＋文件夾”按鈕，指定某文件夾，輸入要查找的文字或者句子段落，輸入替換內(nèi)容，點(diǎn)擊開始搞定。
“多內(nèi)容替換”選擇后，會(huì)在右邊顯示一個(gè)文本框和綠色“＋”標(biāo)志，點(diǎn)擊“＋”，彈出“多重替換設(shè)置”屬性框，比如對(duì)“示例文本.txt”中的“多多”字樣改成“shebaodan”，對(duì)“www”改成“網(wǎng)站”，將這些信息分別寫入“替換目標(biāo)”、“替換內(nèi)容”中，默認(rèn)情況下是“一般替換規(guī)則”，輸入四項(xiàng)后，選擇“保存規(guī)則”，關(guān)閉該窗口，此時(shí)，在原來的“查找內(nèi)容”、“替換內(nèi)容”不再能操作了，取代它的是剛才我們定義的那條“規(guī)則”

2、特征字符串之間的批量替換
①對(duì)文件中一對(duì)字符串所劃定的區(qū)域進(jìn)行處理，對(duì)于網(wǎng)頁、編程源文件、這些文件的特點(diǎn)就是看上去非常的繁瑣，不容易查詢關(guān)鍵字等，比如txt、htm、c、h、cpp、asp、cpp、java等。通過點(diǎn)擊工具欄上的“配置”，可以看到默認(rèn)支持的文件類型，而且還可以“增加”進(jìn)行定義沒有的格式，同時(shí)，確定輸出的方式，是直接在源文件上進(jìn)行還是另外存儲(chǔ)到別處

②點(diǎn)擊工具欄上的“特征替換”，在源目標(biāo)區(qū)添加文件或文件夾，比如打開一個(gè)htm文件，想將“<div,”中對(duì)應(yīng)的內(nèi)容去掉,在“起始特征字符串”中輸入“<div”,在“結(jié)束特征字符串”中輸入“”，“替換內(nèi)容”中不需要輸入，最終結(jié)果是搜索全文刪除它們之間的內(nèi)容。同樣也可以更換其他內(nèi)容，只要在“替換內(nèi)容”中輸入相應(yīng)的信息就可以了

3.正則式替換，這個(gè)是最快處理文本和網(wǎng)頁的高級(jí)手段下面演示替換掉所有html標(biāo)簽獲得網(wǎng)頁里面的存文本

替換成功后的效果，相信在大家在平常工作或者做自媒體的過程中肯定用得上，比如文章采集，關(guān)鍵詞收集等等都用得上

在線咨詢

上一篇：使用 WebGL 為 HTML5 游戲創(chuàng)建逼真的地形
下一篇：網(wǎng)頁文字復(fù)制不了？學(xué)會(huì)這5個(gè)方法，全網(wǎng)內(nèi)容任你復(fù)制

您的項(xiàng)目需求

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