原生JS实现HTML转Markdown功能

/**
 * 把 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(/\&lt\;/ig,'<').replace(/\&gt\;/ig,'>')
 
    // 删去头部的空行
    purehtml = purehtml.replace(/^\n{1,}/i,'')
 
    return purehtml
}