亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

HTML -> Markdown

alanoddsoff / 1492人閱讀

摘要：只支持協(xié)議，選項(xiàng)表示文檔中的選擇器，如選擇器。對(duì)于單個(gè)，判斷其進(jìn)行映射。同時(shí)還需要注意對(duì)于代碼塊其換行是被樣式控制的，如下圖而且中的屬性不屬于標(biāo)準(zhǔn)，是瀏覽器各自實(shí)現(xiàn)的。

情景重現(xiàn)

有時(shí)候，我們看到網(wǎng)上比較好的文章，我們油然會(huì)想去轉(zhuǎn)載，但是呈現(xiàn)在瀏覽器上文章的格式為 HTML，我們書(shū)寫文章的格式又為 Markdown，所以我便想實(shí)現(xiàn) HTML 到 Markdown 的轉(zhuǎn)換。

注：對(duì)于一些文章排版較為復(fù)雜的 HTML 標(biāo)簽（如 table），暫時(shí)直接輸出 HTML

使用

還是從 npm 開(kāi)始，支持三種方式（URL/file/命令參數(shù)）的調(diào)用。

npm i -g html-markdown
html2md -h
html2md https://www.npmjs.com/package/html-markdown -s "#readme" > html-markdown-readme.md
html2md path/to/html/file -s "#markdown"
html2md path/to/html/file
html2md --eval "
Hello!
"

URL 只支持 HTTP/HTTPs 協(xié)議，-s --selector 選項(xiàng)表示 HTML 文檔中的 DOM 選擇器，如 jQuery 選擇器。

以上為命令行的方式，同時(shí)還提供第三方包的形式

npm i --save html-markdown
var html2md = require("html-markdown");

// can use in browser and node.
var md1 = html2md.html2mdFromString("
Hello!
");

// https or http, not isomorphic
html2md.html2mdFromURL("https://www.npmjs.com/package/song-robot", "#readme").then(console.log).catch(console.error);

// not isomorphic
html2md.html2mdFromPath("path/to/html/file", "#markdown").then(console.log).catch(console.error);
實(shí)現(xiàn)

一共實(shí)現(xiàn)了 2 個(gè)版本，分別用 Cheerio、jsDom 實(shí)現(xiàn)。

Cheerio 更側(cè)重于 node 端，jsDom 則將 HTML 標(biāo)準(zhǔn)在 node 上實(shí)現(xiàn)了，所以在瀏覽器端不需要導(dǎo)入 jsDom，因?yàn)闉g覽器已經(jīng)實(shí)現(xiàn)了 HTML 標(biāo)準(zhǔn)。故 jsDom 版本加上環(huán)境的判斷，可以在瀏覽器和服務(wù)器端使用同一套代碼

具體的轉(zhuǎn)化思路大致是，遞歸遍歷 dom 樹(shù)。對(duì)于單個(gè) node ，判斷其 tagName 進(jìn)行映射。

if (/^h([d]+)$/i.test(tagName)) {
    mapStr = `${"#".repeat(+RegExp.$1)} ${childrenRender()}`;
} else if ("ul" === tagName || "ol" === tagName) {
    mapStr = `${childrenRender(level+(parentTagName === "li"? 1 : 0))}`
} else if ("li" === tagName) {
    mapStr = `${"   ".repeat(level)}${parentTagName === "ul" ? "-" : 1+index+"."} ${childrenRender()}`
} else if ("img" === tagName) {
    mapStr = `![${dom.getAttribute("alt") || ""}](${dom.getAttribute("src")})`
} else if ("p" === tagName) {
    mapStr = `${childrenRender()}  `
} else if ("code" === tagName) {
    mapStr = "`" + childrenRender() + "`"
} else if ("pre" === tagName) {
    mapStr = "
```
"+ `${jsdomText(dom).replace(/^
?
/, "").replace(/
?
$/, "")}
` +"```
"
} else if ("a" === tagName) {
    mapStr = `[${childrenRender()}](${dom.getAttribute("href")})`;
} else if ("div" === tagName) {
    mapStr = `${childrenRender()}`
} else if ("strong" === tagName) {
    mapStr = `**${childrenRender()}**`
} else if ("em" === tagName) {
    mapStr = `*${childrenRender()}*`
} else if ("hr" === tagName) {
    mapStr = `------`
} else if ("del" === tagName) {
    mapStr = `~~${childrenRender()}~~`
} else if ("html" === tagName || "body" === tagName) {
    mapStr = childrenRender()
} else if ("head" === tagName) {
    mapStr = "";
} else {
    mapStr = dom.outerHTML;
}

同時(shí)還需要注意！對(duì)于代碼塊

其換行是被樣式控制的，如下圖

而且 Dom 中的屬性 innerText 不屬于 HTML 標(biāo)準(zhǔn)，是瀏覽器各自實(shí)現(xiàn)的。如下圖，innerText 是帶換行的，而 textContent 則不帶（jQuery 中 text() 也是不帶的）

所以就需要我們自己判斷是否需要換行，即自己實(shí)現(xiàn) innerText

var jsdomText = function (dom) {
    var html = dom.innerHTML;
    if(!html) {
        return dom.textContent;
    }
    var myhtml = html.replace(/(.*?)
/gmi, "$1
")
        .replace(/(.*?)
/gmi, "$1 ") .replace(//gmi, " ") .replace(/<(?:.)*?>/gm, "") // remove all html tags var he = require("he"); // he for decoding html entities var mytext = he.decode(myhtml); return mytext; }

歡迎使用，并給我提 Issue，我將會(huì)不斷進(jìn)行優(yōu)化改善。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81437.html

相關(guān)文章

  • Django 博客開(kāi)發(fā)教程 9 - 支持 Markdown 語(yǔ)法和代碼高亮

    摘要：注意如果你按照教程中的方法做完后發(fā)現(xiàn)代碼依然沒(méi)有高亮，請(qǐng)依次檢查以下步驟確保在渲染文本時(shí)添加了拓展，詳情見(jiàn)上文。有些樣式文件可能對(duì)代碼高亮沒(méi)有作用，首先嘗試用樣式文件做測(cè)試。在支持語(yǔ)法和代碼高亮追夢(mèng)人物的博客的評(píng)論區(qū)留言。 為了讓博客文章具有良好的排版，顯示更加豐富的格式，我們使用 Markdown 語(yǔ)法來(lái)書(shū)寫我們的博文。Markdown 是一種 HTML 文本標(biāo)記語(yǔ)言，只要遵循它約定...

    zr_hebo 評(píng)論0 收藏0

  • Django搭建個(gè)人博客：使用Markdown語(yǔ)法書(shū)寫文章

    摘要：重新打開(kāi)一個(gè)命令行窗口，進(jìn)入虛擬環(huán)境，安裝是一種通用語(yǔ)法高亮顯示器，可以幫助我們自動(dòng)生成美化代碼塊的樣式文件。 上一章我們實(shí)現(xiàn)了文章詳情頁(yè)面。為了讓文章正文能夠進(jìn)行標(biāo)題、加粗、引用、代碼塊等不同的排版（像在Office中那樣！），我們將使用Markdown語(yǔ)法。 安裝Markdown Markdown是一種輕量級(jí)的標(biāo)記語(yǔ)言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的或...

    沈建明 評(píng)論0 收藏0

  • 分享一個(gè)免費(fèi)的在線表格轉(zhuǎn)換工具 - TableConvert

    摘要：是一個(gè)可以在線轉(zhuǎn)換表格的工具，支持表格表格和表格，并且還內(nèi)嵌了一個(gè)表格編輯器，像微軟的一樣編輯，使用非常方便。拿到對(duì)應(yīng)表格的后，可以直接在文檔中使用該文本。 showImg(https://segmentfault.com/img/bVbwJCE?w=1200&h=674); TableConvert 是一個(gè)可以在線轉(zhuǎn)換表格的工具，支持 Markdown 表格、CSV、JSON、XML...

    鄒強(qiáng) 評(píng)論0 收藏0

  • 微信小程序富文本解析wxParse Alpha0.1-支持HTML及markdown解析

    摘要：本項(xiàng)目由微信小程序開(kāi)發(fā)論壇會(huì)員開(kāi)發(fā)原文地址垂直微信小程序開(kāi)發(fā)交流社區(qū)加載慢，等等微信小程序富文本解析自定義組件，支持及解析可能是第一個(gè)微信小程序富文本解析組件代碼庫(kù)地址示例版使用地址現(xiàn)狀版本號(hào)目前還不太適合直接使用目前項(xiàng)目不 本項(xiàng)目由微信小程序開(kāi)發(fā)論壇-WeAppDev http://weappdev.com/ 會(huì)員開(kāi)發(fā) 原文地址: http://weappdev.com/t/wxp...

    daydream 評(píng)論0 收藏0

  • 使用Python Markdown 生成 html

    摘要：越來(lái)越喜歡使用編寫文檔，相對(duì)更簡(jiǎn)單方便，而且可以渲染輸出自己喜歡的樣式。開(kāi)發(fā)過(guò)程中編寫的文檔方便等版本控制工具管理。完整代碼將上的代碼保存為然后執(zhí)行 越來(lái)越喜歡使用markdown編寫文檔，相對(duì)doc更簡(jiǎn)單方便，而且可以渲染輸出自己喜歡的樣式。開(kāi)發(fā)過(guò)程中編寫的文檔markdown方便svn、git等版本控制工具管理。 安裝 Python-Markdown ，做markdown to h...

    levy9527 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<