HTML逆向生成Markdown -- Part 2

HTML逆向生成Markdown -- Part 2

接上一篇HTML逆向生成Markdown -- Part 1

在前文的結尾，咱們已經將HTML文本處理爲一個個虛擬DOM節點（JSON對象）了。

爲了方便以後的處理，新增長了兩個表示結束標籤的節點，以方便構建DOM樹。

const result = [
    {
        tag: 'h2',
        type: 42,           // 不要在乎`type`屬性，這是自定義的，42表明`h2`元素對應數字
        position: 1
    },
    {
        tag: 'textNode',
        type: 1,
        position: 3,
        content: '逆向解析HTMl'
    },
    {
        tag: 'h2',
        type: 42,
        position: 2
    },
    {
        tag: 'p',
        type: 6,
        position: 1
    },
    {
        tag: 'a',
        type: 2,
        position: 1,
        attr: {
            href: 'https://www.baidu.com'
        }
    },
    {
        tag: 'textNode',
        type: 1,
        position: 3,
        content: 'Markdown'
    },
    {
        tag: 'a',
        type: 2,
        position: 2
    },
    {
        tag: 'p',
        type: 6,
        position: 2
    },
]
複製代碼

構建虛擬DOM樹

咱們已經用position屬性標識了開始/結尾標籤和文本節點，咱們知道在開始和結束標籤之間的節點都屬於該節點的子節點。 以此類推，就表示出一顆DOM樹了。 以上文的節點數組爲輸入咱們來嘗試構建一個虛擬DOM樹。

1. 第一個是h2標籤且爲開始標籤

[
    {
        tag: 'h2',
        type: 42
    }
]
複製代碼

2. 第二個是文本節點

[
    {
        tag: 'h2',
        type: 42,
        child: [
            {
                tag: 'textNode',
                type: 1,
                content: '逆向解析HTMl'
            }
        ]
    }
]
複製代碼

3. 第三個是h2的結束標籤，結束標籤不會改變樹的結構。結束標籤表示以後的節點都不是該節點的子節點。（在代碼層面上來講就是回退到父節點上，以後在添加節點就是添加到父節點的子節點數組中）

[
    {
        tag: 'h2',
        type: 42,
        child: [
            {
                tag: 'textNode',
                type: 1,
                content: '逆向解析HTMl'
            }
        ]
    }
]
複製代碼

4. 第四個是p的開始標籤。由於h2已經結束了，因此p被添加到根節點上。

[
    {
        tag: 'h2',
        type: 42,
        child: [
            {
                tag: 'textNode',
                type: 1,
                content: '逆向解析HTMl'
            }
        ]
    },
    {
        tag: 'p',
        type: 6
    }
]
複製代碼

5. 第五個是a的開始標籤，由於上一個是p的開始標籤，因此a被添加到p的子節點中

[
    {
        tag: 'h2',
        type: 42,
        child: [
            {
                tag: 'textNode',
                type: 1,
                content: '逆向解析HTMl'
            }
        ]
    },
    {
        tag: 'p',
        type: 6,
        child: [
            {
                tag: 'a',
                type: 2,
                attr: {
                    href: 'https://www.baidu.com'
                }
            }
        ]
    }
]
複製代碼

6. 第六個是文本節點，同理被添加到a的子節點中。

[
    {
        tag: 'h2',
        type: 42,
        child: [
            {
                tag: 'textNode',
                type: 1,
                content: '逆向解析HTMl'
            }
        ]
    },
    {
        tag: 'p',
        type: 6,
        child: [
            {
                tag: 'a',
                type: 2,
                attr: {
                    href: 'https://www.baidu.com'
                },
                child: [
                    {
                        tag: 'textNode',
                        type: 1,
                        position: 3,
                        content: 'Markdown'
                    }
                ]
            }
        ]
    }
]
複製代碼

7. 以後的兩個都是結束標籤，樹結構也不會發生變化。

最終，咱們獲得的是這樣一個DOM樹結構：

const  result = [
    {
        tag: 'h2',
        type: 42,
        child: [
            {
                tag: 'textNode',
                type: 1,
                content: '逆向解析HTMl'
            }
        ]
    },
    {
        tag: 'p',
        type: 6,
        child: [
            {
                tag: 'a',
                type: 2,
                attr: {
                    href: 'https://www.baidu.com'
                },
                child: [
                    {
                        tag: 'textNode',
                        type: 1,
                        position: 3,
                        content: 'Markdown'
                    }
                ]
            }
        ]
    }
]
複製代碼

到這一步，咱們已經將HTML文本轉化成了虛擬DOM樹。最後也是最關鍵的一步，就是分析DOM樹，根據MD規則生成MD文本了。 能夠說以前的三個步驟都是爲了最後一步服務的。