原生 JS 實現 HTML 轉 Markdown ,html2md.js
之前因為一些需要,需要轉換部分 HTML 標籤成 markdown 格式,但是不知不覺就完善到一個相對完整的函式。
然後我就封裝成了一個檔案放在了 github ,也簡單做了兩個示例網頁。
- HTML 轉換 -- https://kohunglee.github.io/html2md/example/conversion.html
- 直接就貼上成 markdown 格式 -- https://kohunglee.github.io/html2md/example/Paste_and_convert.html
程式碼地址在 html2md
程式碼很簡單,用的也是原生 js ,其中包含了大量簡單的正則,也沒有使用更多的函式進行優化結構,但這個函式確實挺好用的,後來還在它的基礎上做了個 emlog 的外掛,希望對一些人有用吧。
外掛地址是 https://www.emlog.net/plugin/detail/445
那麼我也懶得對它進一步的優化了,這裡就簡單將原始碼貼出來吧,然後再講一下我是怎麼實現這個功能的,希望有的人會對它感興趣。
原始碼一共二百多行,但我知道確實可以寫的更簡單。
/** * 把 html 內容轉化為 markdown 格式 V1.0 * * @author kohunglee * @param {string} htmlData 轉換前的 html * @return {string} 轉化後的 markdown 原始碼 */ function html2md(htmlData){ codeContent = new Array // code標籤資料 preContent = new Array // pre標籤資料 tableContent = new Array // table標籤資料 olContent = new Array // ol標籤資料 imgContent = new Array // img標籤資料 aContent = new Array // a標籤資料 let pureHtml = htmlData // 原始碼 console.log("轉換前的原始碼:" + pureHtml) // 函式:刪去html標籤 function clearHtmlTag(sourceData = ''){ return sourceData.replace(/\<[\s\S]*?\>/g,'') } // 復原ol標籤 function olRecover(olData = ''){ let result = olData let num = olData.match(/\<li\>/ig).length for(let i = 1; i <= num; i++){ let line = '[~wrap]' if(i == 1) line = '[~wrap][~wrap]' result = result.replace(/\<li\>/i, line + i + '. ') } result = result.replace(/\<\/li\>/, '') return result } // 函式:復原img標籤 function imgRecover(imgHtml = ''){ let imgSrc,imgTit,imgAlt,result imgSrc = imgHtml.match(/(?<=src=['"])[\s\S]*?(?=['"])/i) imgTit = imgHtml.match(/(?<=title=['"])[\s\S]*?(?=['"])/i) imgAlt = imgHtml.match(/(?<=alt=['"])[\s\S]*?(?=['"])/i) imgTit = (imgTit != null) ? ` "${imgTit}"` : ' ' imgAlt = (imgAlt != 'null') ? imgAlt : " " result = `![${imgAlt}](${imgSrc}${imgTit})` return result } // 函式:復原a標籤 function aRecover(aData = ''){ let aHref = '' + aData.match(/(?<=href=['"])[\s\S]*?(?=['"])/i) let aTit = '' + aData.match(/(?<=title=['"])[\s\S]*?(?=['"])/i) let aText = '' + aData.match(/(?<=\<a\s*[^\>]*?\>)[\s\S]*?(?=<\/a>)/i) let aImg = aData.match(/<img\s*[^\>]*?\>[^]*?(<\/img>)?/i) let aImgSrc,aImgTit,aImgAlt aTit = (aTit != 'null') ? ` "${aTit}"` : ' ' aText = clearHtmlTag(aText) let result = `[${aText}](${aHref}${aTit})` if(aImg != null){ // 函式:如果發現圖片,則更換為圖片顯示模式 aImgSrc = aImg[0].match(/(?<=src=['"])[\s\S]*?(?=['"])/i) aImgTit = aImg[0].match(/(?<=title=['"])[\s\S]*?(?=['"])/i) aImgAlt = aImg[0].match(/(?<=alt=['"])[\s\S]*?(?=['"])/i) aImgTit = (aImgTit != null) ? ` "${aImgTit}"` : ' ' aImgAlt = (aImgAlt != 'null') ? aImgAlt : " " result = `[![${aImgAlt}](${aImgSrc}${aImgTit})](${aHref}${aTit})` } return result } // 函式:復原table標籤 function tableRecover(tableData = null){ if(tableData[0] == null){ // 如果不存在 th 標籤,則預設表格為一層 let result = '' let colNum = tableData[1].length for(let i = 0; i < colNum; i++){ result += `|${clearHtmlTag(tableData[1][i])}` } result += `|[~wrap]` for(let j = 0; j < colNum; j++){ result += `| :------------: ` } result += `|[~wrap]` return result } let colNum = tableData[0].length // 如果存在 th 標籤,則按 th 的格數來構建整個表格 let result = '' for(let i = 0; i < colNum; i++){ result += `|${clearHtmlTag(tableData[0][i])}` } result += `|[~wrap]` for(let j = 0; j < colNum; j++){ result += `| :------------: ` } result += `|[~wrap]` for(let k = 0; k < tableData[1].length;){ for(let z = 0; z < colNum; z++,k++){ result += `|${clearHtmlTag(tableData[1][k])}` } result += `|[~wrap]` } return result+`[~wrap]` } // 去掉樣式和指令碼極其內容 pureHtml = pureHtml.replace(/<style\s*[^\>]*?\>[^]*?<\/style>/ig,'').replace(/<script\s*[^\>]*?\>[^]*?<\/script>/ig,'') // 儲存pre的內容,並替換<pre>中的內容 preContent = pureHtml.match(/<pre\s*[^\>]*?\>[^]*?<\/pre>/ig) pureHtml = pureHtml.replace(/(?<=\<pre\s*[^\>]*?\>)[\s\S]*?(?=<\/pre>)/ig,'`#preContent#`') // 儲存code的內容,並替換<code>中的內容 codeContent = pureHtml.match(/(?<=\<code\s*[^\>]*?\>)[\s\S]*?(?=<\/code>)/ig) pureHtml = pureHtml.replace(/(?<=\<code\s*[^\>]*?\>)[\s\S]*?(?=<\/code>)/ig,'`#codeContent#`') // 儲存a的內容,並替換<a>中的內容 aContent = pureHtml.match(/<a\s*[^\>]*?\>[^]*?<\/a>/ig) pureHtml = pureHtml.replace(/<a\s*[^\>]*?\>[^]*?<\/a>/ig,'`#aContent#`') // 儲存img的內容,並替換<img>中的內容 imgContent = pureHtml.match(/<img\s*[^\>]*?\>[^]*?(<\/img>)?/ig) pureHtml = pureHtml.replace(/<img\s*[^\>]*?\>[^]*?(<\/img>)?/ig,'`#imgContent#`') // 獲取純淨(無屬性)的 html pureHtml = pureHtml.replace(/(?<=\<[a-zA-Z0-9]*)\s.*?(?=\>)/g,'') // 標題:標獲取<h1><h2>...資料,並替換 pureHtml = pureHtml.replace(/<h1>/ig,'[~wrap]# ').replace(/<\/h1>/ig,'[~wrap][~wrap]') .replace(/<h2>/ig,'[~wrap]## ').replace(/<\/h2>/ig,'[~wrap][~wrap]') .replace(/<h3>/ig,'[~wrap]### ').replace(/<\/h3>/ig,'[~wrap][~wrap]') .replace(/<h4>/ig,'[~wrap]#### ').replace(/<\/h4>/ig,'[~wrap][~wrap]') .replace(/<h5>/ig,'[~wrap]##### ').replace(/<\/h5>/ig,'[~wrap][~wrap]') .replace(/<h6>/ig,'[~wrap]###### ').replace(/<\/h6>/ig,'[~wrap][~wrap]') // 段落:處理一些常用的結構標籤 pureHtml = pureHtml.replace(/(<br>)/ig,'[~wrap]').replace(/(<\/p>)|(<br\/>)|(<\/div>)/ig,'[~wrap][~wrap]') .replace(/(<meta>)|(<span>)|(<p>)|(<div>)/ig,'').replace(/<\/span>/ig,'') // 粗體:替換<b><strong> pureHtml = pureHtml.replace(/(<b>)|(<strong>)/ig,'**').replace(/(<\/b>)|(<\/strong>)/ig,'**') // 斜體:替換<i><em><abbr><dfn><cite><address> pureHtml = pureHtml.replace(/(<i>)|(<em>)|(<abbr>)|(<dfn>)|(<cite>)|(<address>)/ig,'*').replace(/(<\/i>)|(<\/em>)|(<\/abbr>)|(<\/dfn>)|(<\/cite>)|(<\/address>)/ig,'*') // 刪除線:替換<del> pureHtml = pureHtml.replace(/\<del\>/ig,'~~').replace(/\<\/del\>/ig,'~~') // 引用:替換<blockquote> pureHtml = pureHtml.replace(/\<blockquote\>/ig,'[~wrap][~wrap]> ').replace(/\<\/blockquote\>/ig,'[~wrap][~wrap]') // 水平線:替換<hr> pureHtml = pureHtml.replace(/\<hr\>/ig,'[~wrap][~wrap]------[~wrap][~wrap]') // 表格 <table>,得到資料,刪除標籤,然後逐層分析儲存,最終根據結果生成 tableContent = pureHtml.match(/(?<=\<table\s*[^\>]*?\>)[\s\S]*?(?=<\/table>)/ig) pureHtml = pureHtml.replace(/<table\s*[^\>]*?\>[^]*?<\/table>/ig,'`#tableContent#`') if(tableContent !== null){ // 分析儲存 tbodyContent = new Array for(let i = 0; i < tableContent.length; i++){ tbodyContent[i] = new Array // tbodyContent[i]的第一個資料是thead資料,第二個是tbody的資料 tbodyContent[i].push(tableContent[i].match(/(?<=\<th>)[\s\S]*?(?=<\/th?>)/ig)) tbodyContent[i].push(tableContent[i].match(/(?<=\<td>)[\s\S]*?(?=<\/td?>)/ig)) } } if(typeof tbodyContent !== "undefined"){ // 替換 for(let i = 0; i < tbodyContent.length; i++){ let tableText = tableRecover(tbodyContent[i]) pureHtml = pureHtml.replace(/\`\#tableContent\#\`/i,tableText) } } // 有序列表<ol>的<li>,儲存ol的內容,並迴圈恢復ol中的內容 olContent = pureHtml.match(/(?<=\<ol\s*[^\>]*?\>)[\s\S]*?(?=<\/ol>)/ig) pureHtml = pureHtml.replace(/(?<=\<ol\s*[^\>]*?\>)[\s\S]*?(?=<\/ol>)/ig,'`#olContent#`') if(olContent !== null){ for(let k = 0; k < olContent.length; k++){ let olText = olRecover(olContent[k]) pureHtml = pureHtml.replace(/\`\#olContent\#\`/i,clearHtmlTag(olText)) } } // 無序列表<ul>的<li>,以及<dd>,直接替換 pureHtml = pureHtml.replace(/(<li>)|(<dd>)/ig,'[~wrap] - ').replace(/(<\/li>)|(<\/dd>)/ig,'[~wrap][~wrap]') // 處理完列表後,將 <lu>、<\lu>、<ol>、<\ol> 處理 pureHtml = pureHtml.replace(/(<ul>)|(<ol>)/ig,'').replace(/(<\/ul>)|(<\/ol>)/ig,'[~wrap][~wrap]') // 先恢復 img ,再恢復 a if(imgContent !== null){ for(let i = 0; i < imgContent.length; i++){ let imgText = imgRecover(imgContent[i]) pureHtml = pureHtml.replace(/\`\#imgContent\#\`/i,imgText) } } // 恢復 a if(aContent !== null){ for(let k = 0; k < aContent.length; k++){ let aText = aRecover(aContent[k]) pureHtml = pureHtml.replace(/\`\#aContent\#\`/i,aText) } } // 換行處理,1.替換 [~wrap] 為 ‘\n’ 2.首行換行刪去。 3.將其他過長的換行刪去。 pureHtml = pureHtml.replace(/\[\~wrap\]/ig,'\n') .replace(/\n{3,}/g,'\n\n') // 程式碼 <code> ,根據上面的陣列恢復code,然後將code替換 if(codeContent !== null){ for(let i = 0; i < codeContent.length; i++){ pureHtml = pureHtml.replace(/\`\#codeContent\#\`/i,clearHtmlTag(codeContent[i])) } } pureHtml = pureHtml.replace(/\<code\>/ig,' ` ').replace(/\<\/code\>/ig,' ` ') // 程式碼 <pre> ,恢復pre,然後將pre替換 if(preContent !== null){ for(let k = 0; k < preContent.length; k++){ let preLanguage = preContent[k].match(/(?<=language-).*?(?=[\s'"])/i) let preText = clearHtmlTag(preContent[k]) preText = preText.replace(/^1\n2\n(\d+\n)*/,'') // 去掉行數 preLanguage = (preLanguage != null && preLanguage[0] != 'undefined') ? preLanguage[0] + '\n' : '\n' pureHtml = pureHtml.replace(/\`\#preContent\#\`/i,preLanguage + preText) } } pureHtml = pureHtml.replace(/\<pre\>/ig,'```').replace(/\<\/pre\>/ig,'\n```\n') // 刪去其餘的html標籤,還原預文字程式碼中的 '<' 和 '>' pureHtml = clearHtmlTag(pureHtml) pureHtml = pureHtml.replace(/\<\;/ig,'<').replace(/\>\;/ig,'>') // 刪去頭部的空行 pureHtml = pureHtml.replace(/^\n{1,}/i,'') return pureHtml }
其中,最開始聲明瞭一些陣列變數,用於將一些轉換過程中的中間產物進行儲存。
然後 pureHtml
這個變數就是整個加工過程中的原料,一直到最後。
首先,函式處理的入口是從 112 行 開始的。
第一步,刪除 <style>
和 <script>
這兩個標籤及其內容。
第二步,將 pre 裡的內容先存到數組裡,然後用 ‘#preContent#’
這個字元替換原來 pre 標籤裡的內容,我稱這個操作為保護。因為後續會有很多複雜的內容,把 pre 保護了,就能保證它的原汁原味,因為 pre 本身就是程式碼,不能動。
第三步,和 pre 一樣的 code ,為什麼先 pre 再 code 呢?因為這兩樣東西有這樣的包含關係,一般 pre 裡可以有 code ,但 code 卻沒有 pre ,所以在考慮這樣的邏輯後,決定這樣儲存。
第四步,就是在沒有 pre 和 code 的干擾下,放心刪除標籤中其他沒有用的屬性,並將 a 和 img 的標籤內容進行 “保護” ,以方便一會兒恢復。
第五步,就是替換一些簡單的標籤,什麼標題啊,斜體啊,橫線啊等等(還有將一些亂七八糟的標籤直接刪除).....最後依次處理表格和列表。
第六步,按照一定的規範,依次將上面 “保護” 的內容,進行恢復。
第七步,將最頭部的空行刪去。(我記得中間也曾檢查多餘的空行刪去,不知道為什麼沒有了),然後轉換完畢,將結果返回。