JavaScript+Node.js寫一款markdown解析器

Posted on by

1. 準備工作

首先編寫getHtml函數，傳入markdown文本字符串，這裡使用fs讀取markdown文件內容，返回值是轉換過後的字符串。

const fs = require('fs');

const source = fs.readFileSync('./test.md', 'utf-8');

const getHtml = (source) => {
    // 處理標題
    return source;
}

const result = getHtml(source);

console.log(result);

主要設計正則表達式和String.prototype.replace方法，replace接收的第一個參數可以是正則，第二個參數如果是函數那麼返回值就是所替換的內容。

2. 處理圖片&超鏈接

圖片和超鏈接的語法很像，![圖片](url)，[超鏈接](url)，使用正則匹配同時需要排除`。props會獲取正則中的$，$1，$2。也就是匹配的字符整體，第一個括號內容，第二個括號內容。比如這裡props[0]就是匹配到的完整內容，第四個參數props[3]是[]中的alt，第五個參數props[4]是鏈接地址。

const imageora = (source) => {
    return source.replace(/(`?)(!?)\[(.*)\]\((.+)\)/gi, (...props) => {
        switch (props[0].trim()[0]) {
            case '!': return `<a href="${props[4]}" rel="external nofollow"  alt="${props[3]}">${props[3]}</a>`;
            case '[': return `<img src="${props[4]}" alt="${props[3]}"/>`;
            default: return props[0];
        }
    });
}

const getHtml = (source) => {
    source = imageora(source);
    return source;
}

3. 處理blockquote

這裡使用\x20匹配空格。如果匹配到內容，將文本props[3]放在blockquote標簽返回就行瞭。

const block = (source) => {
    return source.replace(/(.*)(`?)\>\x20+(.+)/gi, (...props) => {
        switch (props[0].trim()[0]) {
            case '>': return `<blockquote>${props[3]}</blockquote>`;
            default: return props[0];
        }
    });
}

4. 處理標題

匹配必須以#開頭，並且#的數量不能超過6，因為h6是最大的瞭，沒有h7，最後props[2]是#後跟隨的文本。

const formatTitle = (source) => {
    return source.replace(/(.*#+)\x20?(.*)/g, (...props) => {
        switch (props[0][0]) {
            case '#': if (props[1].length <= 6) {
                return `<h${props[1].length}>${props[2].trim()}</h${props[1].length}>`;
            };
            default: return props[0];
        }
    })
}

5. 處理字體

寫的開始復雜瞭

const formatFont = (source) => {
    // 處理 ~ 包裹的文本
    source = source.replace(/([`\\]*\~{2})(.*?)\~{2}/g, (...props) => {
        switch (props[0].trim()[0]) {
            case '~': return `<del>${props[2]}</del>`;;
            default: return props[0];
        }
    });
    // 處理 * - 表示的換行
    source = source.replace(/([`\\]*)[* -]{3,}\n/g, (...props) => {
        switch (props[0].trim()[0]) {
            case '*': ;
            case '-': return `<hr />`;
            default: return props[0];
        }
    })
    // 處理***表示的加粗或者傾斜。
    source = source.replace(/([`\\]*\*{1,3})(.*?)(\*{1,3})/g, (...props) => {
        switch (props[0].trim()[0]) {
            case '*': if (props[1] === props[3]) {
                if (props[1].length === 1) {
                    return `<em>${props[2]}</em>`;;
                } else if (props[1].length === 2) {
                    return `<strong>${props[2]}</strong>`;;
                } else if (props[1].length === 3) {
                    return `<strong><em>${props[2]}</em></strong>`;;
                }
            };
            default: return props[0];
        }
    });
    return source;
}

6. 處理代碼塊

使用正則匹配使用`包裹的代碼塊，props[1]是開頭`的數量，props[5]是結尾`的數量，必須相等才生效。

const pre = (source) => {
    source = source.replace(/([\\`]+)(\w+(\n))?([^!`]*?)(`+)/g, (...props) => {
        switch (props[0].trim()[0]) {
            case '`': if (props[1] === props[5]) {
                return `<pre>${props[3] || ''}${props[4]}</pre>`;
            };
            default: return props[0];
        }
    });
    return source;
}

7. 處理列表

這裡隻是處理瞭ul無序列表，寫的同樣很麻煩。主要我的思路是真復雜。而且bug肯定也不少。先匹配-+*加上空格，然後根據這一行前面的空格熟替換為ul。這樣每一行都保證被ulli包裹。

第二步判斷相鄰ul之間相差的個數，如果相等則表示應該是同一個ul的li，替換掉</ul><ul>為空，如果後一個ul大於前一個ul，則表示後面有退格，新生成一個<ul>包裹退格後的li，如果是最後一個ul則補齊前面所有的</ul>。

const list = (source) => {
    source = source.replace(/.*?[\x20\t]*([\-\+\*]{1})\x20(.*)/g, (...props) => {
        if (/^[\t\x20\-\+\*]/.test(props[0])) {
            return props[0].replace(/([\t\x20]*)[\-\+\*]\x20(.*)/g, (...props) => {
                const len = props[1].length || '';
                return `<ul${len}><li>${props[2]}</li></ul${len}>`;
            })
        } else {
            return props[0];
        }
    });
    const set = new Set();
    source = source.replace(/<\/ul(\d*)>(\n<ul(\d*)>)?/g, (...props) => {
        set.add(props[1]);
        if (props[1] == props[3]) {
            return '';
        } else if (props[1] < props[3]) {
            return '<ul>';
        } else {
            const arr = [...set];
            const end = arr.indexOf(props[1]);
            let start = arr.indexOf(props[3]);
            if (start > 0) {
                return '</ul>'.repeat(end - start);
            } else {
                return '</ul>'.repeat(end + 1);
            }            
        }
    });
    return source.replace(/<(\/?)ul(\d*)>/g, '<$1ul>');
}

8. 處理表格

const table = (source) => {
    source = source.replace(/\|.*\|\n\|\s*-+\s*\|.*\|\n/g, (...props) => {
        let str = '<table><tr>';
        const data = props[0].split(/\n/)[0].split('|');
        for (let i = 1; i < data.length - 1; i++) {
            str += `<th>${data[i].trim()}</th>`
        }
        str += '<tr></table>';
        return str;
    });
    return formatTd(source);
}

const formatTd = (source) => {
    source = source.replace(/<\/table>\|.*\|\n/g, (...props) => {
        let str = '<tr>';
        const data = props[0].split('|');
        for (let i = 1; i < data.length - 1; i++) {
            str += `<td>${data[i].trim()}</td>`
        }
        str += '<tr></table>';
        return str;
    });
    if (source.includes('</table>|')) {
        return formatTd(source);
    }
    return source;
}

9. 調用方法

const getHtml = (source) => {
    source = imageora(source);
    source = block(source);
    source = formatTitle(source);
    source = formatFont(source);
    source = pre(source);
    source = list(source);
    source = table(source);
    return source;
}

const result = getHtml(source);

console.log(result);

到此這篇關於JavaScript+Node.js寫一款markdown解析器的文章就介紹到這瞭,更多相關寫一款markdown解析器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：