根據markdown文件反向轉換成chrome瀏覽器

根據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 的。

己平常發現好的工具就喜歡收藏，使用了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。

提供了一些不同專題可以訂閱。

HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

HTML 鏈接

如何在HTML文檔中創建鏈接。

(可以在本頁底端找到更多實例)

HTML 超鏈接（鏈接）

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：:

href 屬性描述了鏈接的目標。.

實例

<a >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

實例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創建在一個HTML文檔書簽標記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

實例

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips"）"：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面創建一個鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

基本的注意事項 - 有用的提示

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當前頁面鏈接到指定位置

如何使用書簽

跳出框架

本例演示如何跳出框架，假如你的頁面被固定在框架之內。

創建電子郵件鏈接

本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 2

本例演示更加復雜的郵件鏈接。

HTML 鏈接標簽

標簽	描述
<a>	定義一個超級鏈接

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：10 款提升工作效率的VSCode 擴展
下一篇：前端CSS表格的基本屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

根據markdown文件反向轉換成chrome瀏覽器

1、復制 markdown 里的每一條書簽

2、替換每條書簽的開始部分

3、替換 A 標簽的 HREF 屬性

您的項目需求