我最近偶然發(fā)現(xiàn)的最強(qiáng)大的概念之一是抽象語法樹或AST的想法。如果您曾經(jīng)學(xué)習(xí)過煉金術(shù)，您可能會(huì)記得，煉金術(shù)士的整個(gè)動(dòng)機(jī)是通過科學(xué)或神秘的方法發(fā)現(xiàn)某種方法將非金牌轉(zhuǎn)化為黃金。

AST是這樣的。使用ASTS，我們可以將Markdown轉(zhuǎn)換為HTML，JSX變成JavaScript，等等。

為什么AST有用？

在職業(yè)生涯的早期，我嘗試使用發(fā)現(xiàn)和重復(fù)方法來更改文件。這最終變得相當(dāng)復(fù)雜，因此我嘗試使用正則表達(dá)式。我最終放棄了這個(gè)想法，因?yàn)樗侨绱舜嗳?。該?yīng)用程序一直都破裂了，因?yàn)橛腥藭?huì)以我沒想到的方式輸入文本，并且會(huì)打破我的正則表達(dá)式，從而導(dǎo)致整個(gè)應(yīng)用程序掉落。

之所以如此困難，是因?yàn)镠TML靈活。這使得使用正則表達(dá)式很難解析。基于字符串的替代品很容易打破，因?yàn)樗赡苠e(cuò)過了一場比賽，匹配過多或做一些怪異的事情，從而導(dǎo)致無效的標(biāo)記使頁面看起來很笨拙。

另一方面，ASTS將HTML變成更加結(jié)構(gòu)化的東西，這使得潛入文本節(jié)點(diǎn)并僅在該文本上進(jìn)行替換變得更加簡單，或者與元素混亂而無需完全處理文本。

這使AST轉(zhuǎn)換更安全，比純粹基于字符串的解決方案更安全，并且容易出錯(cuò)。

AST是用什么？

首先，讓我們使用幾行降價(jià)來查看最小文檔。將其保存為稱為home.md的文件，我們將保存在我們網(wǎng)站的內(nèi)容文件夾中。

 ＃ 你好世界！

！[cardigan corgi]（<https:>）一個(gè)可愛的corgi！

還有一些文字在這里。</https:>

假設(shè)我們知道Markdown，我們可以推斷出，當(dāng)這種降價(jià)解析時(shí)，最終將是一個(gè)H1標(biāo)簽，上面寫著“ Hello World！”然后，文本的兩個(gè)段落：第一個(gè)包含corgi的圖像和一些旨在描述它的文本，第二個(gè)文本說：“還有一些文字在這里。”

但是，如何從降價(jià)轉(zhuǎn)換為HTML呢？

那就是AST進(jìn)來的地方！

由于它支持多種語言，因此我們將使用Unist語法樹規(guī)范，更具體地說是項(xiàng)目統(tǒng)一。

安裝依賴項(xiàng)

首先，我們需要安裝所需的依賴項(xiàng)將降價(jià)分析為AST并將其轉(zhuǎn)換為HTML。為此，我們需要確保將文件夾初始化為包裝。在您的終端中運(yùn)行以下命令：

 ＃確保您在根文件夾中（``content''中的位置）
＃將此文件夾初始化為NPM軟件包
npm init

＃安裝依賴項(xiàng)
NPM安裝統(tǒng)一的備注備注html

如果我們假設(shè)我們的降價(jià)存儲(chǔ)在home.md中，則可以通過以下代碼獲得AST：

 const fs = require（'fs'）;
const Unified = require（'unified'）;
const markdown = require（'eRext-parse'）;
const html = require（'dempress-html'）;

const contents = unified（）
  。
  .use（html）
  。
  .tostring（）;

console.log（內(nèi)容）;

該代碼利用了Node的內(nèi)置FS模塊，這使我們能夠訪問和操縱文件系統(tǒng)。有關(guān)其工作原理的更多信息，請查看官方文檔。

如果我們將其保存為src/index.js并使用節(jié)點(diǎn)從命令行執(zhí)行此腳本，我們將在終端中看到以下內(nèi)容：

 $ node src/index.js 
<h1>你好世界！</h1>
<p> <img  src="%E2%80%9C" alt="如何在抽象語法樹中修改節(jié)點(diǎn)" >” alt =“ cardigan corgi”>
</p><p>還有更多文字。</p>

我們告訴Unified使用Relecor-Parse將Markdown文件轉(zhuǎn)換為AST，然后使用Relever-HTML將Markdown AST變成HTML，或者更具體地說，它將其變成稱為VFILE的東西。使用ToString（）方法將AST變成可以在瀏覽器中顯示的實(shí)際HTML字符串！

多虧了開源社區(qū)的辛勤工作，言論為將降級變成HTML所做的所有辛勤工作。 （請參閱差異）

接下來，讓我們看一下這是如何工作的。

AST長什么樣？

要查看實(shí)際的AST，讓我們編寫一個(gè)小插件來記錄它：

 const fs = require（'fs'）;
const Unified = require（'unified'）;
const markdown = require（'eRext-parse'）;
const html = require（'dempress-html'）;

const contents = unified（）
	。
  。
	.use（html）
	。
	.tostring（）;

運(yùn)行腳本的輸出現(xiàn)在將為：

 {
  “ type”：“ root”，
  “孩子們”： [
    {
      “類型”：“標(biāo)題”，
      “深度”：1，
      “孩子們”： [
        {
          “ type”：“ text”，
          “價(jià)值”：“你好世界！”，
          “位置”： {}
        }
      ]，，
      “位置”： {}
    }，，
    {
      “ type”：“段落”，
      “孩子們”： [
        {
          “類型”：“圖像”，
          “標(biāo)題”：null，
          “ url”：“ <https:>”，
          “ Alt”：“ Cardigan Corgi”，
          “位置”： {}
        }，，
        {
          “ type”：“ text”，
          “價(jià)值”：“可愛的corgi！”，
          “位置”： {}
        }
      ]，，
      “位置”： {}
    }，，
    {
      “ type”：“段落”，
      “孩子們”： [
        {
          “ type”：“ text”，
          “ value”：“還有更多文本?！保?          “位置”： {}
        }
      ]，，
      “位置”： {}
    }
  ]，，
  “位置”： {}
}</https:>

請注意，位置值已被截?cái)嘁怨?jié)省空間。它們包含有關(guān)文檔中節(jié)點(diǎn)位置的信息。出于本教程的目的，我們不會(huì)使用此信息。 （請參閱差異）

這是有點(diǎn)不知所措，但是如果我們放大，我們可以看到降價(jià)的每個(gè)部分都變成了一種節(jié)點(diǎn)，其中包含文本節(jié)點(diǎn)。

例如，標(biāo)題變?yōu)椋?/p>

 {
  “類型”：“標(biāo)題”，
  “深度”：1，
  “孩子們”： [
    {
      “ type”：“ text”，
      “價(jià)值”：“你好世界！”，
      “位置”： {}
    }
  ]，，
  “位置”： {}
}

這就是這意味著：

• 這些類型告訴我們我們正在處理哪種節(jié)點(diǎn)。
• 每個(gè)節(jié)點(diǎn)類型都有描述節(jié)點(diǎn)的其他屬性。標(biāo)題上的深度屬性告訴我們它的標(biāo)題是多少 - 深度為1是一個(gè)

  標(biāo)簽，2表示

  等等。

• 孩子們的數(shù)組告訴我們這個(gè)節(jié)點(diǎn)里面有什么。在標(biāo)題和段落中，只有文字，但是我們也可以在這里看到內(nèi)聯(lián)元素，例如。

這是ASTS的力量：我們現(xiàn)在將Markdown文檔描述為計(jì)算機(jī)可以理解的對象。如果我們想將其打印回Markdown，Markdown編譯器將知道一個(gè)深度為1的“標(biāo)題”節(jié)點(diǎn)以＃開始，并且?guī)в小?Hello”的子文本節(jié)點(diǎn)意味著最終行應(yīng)該是＃Hello。

AST轉(zhuǎn)換如何工作

通常使用訪問者模式進(jìn)行轉(zhuǎn)換AST。知道這是如何生產(chǎn)力的來源的來源和出現(xiàn)并不重要的，但是如果您很好奇，Soham Kamani對人類的JavaScript設(shè)計(jì)模式有一個(gè)很好的例子，可以幫助解釋其工作原理。重要的是要知道的是，AST工作中的大多數(shù)資源都會(huì)談?wù)摗霸L問節(jié)點(diǎn)”，該節(jié)點(diǎn)大致轉(zhuǎn)化為“找到AST的一部分，以便我們可以用它來做些事情”。這種工作實(shí)踐的方式是，我們編寫了一個(gè)將應(yīng)用于與我們的標(biāo)準(zhǔn)匹配的AST節(jié)點(diǎn)的函數(shù)。

關(guān)于其工作原理的一些重要說明：

• AST可能是巨大的，因此出于績效原因，我們將直接突變節(jié)點(diǎn)。這與我通常如何處理事物的方式背道而馳 - 作為一般規(guī)則，我不喜歡變異全球狀態(tài) - 但在這種情況下這是有意義的。
• 訪客遞歸工作。這意味著，如果我們處理一個(gè)節(jié)點(diǎn)并創(chuàng)建相同類型的新節(jié)點(diǎn)，則訪問者也將在新創(chuàng)建的節(jié)點(diǎn)上運(yùn)行，除非我們明確告訴訪客不這樣做。
• 在本教程中，我們不會(huì)太深入，但是這兩個(gè)想法將幫助我們了解我們開始弄亂代碼時(shí)發(fā)生的事情。

如何修改AST的HTML輸出？

但是，如果我們想更改降價(jià)的輸出怎么辦？假設(shè)我們的目標(biāo)是用圖形元素包裝圖像標(biāo)簽并提供標(biāo)題，這樣：

 <figud>
  <img  src="%E2%80%9C" alt="如何在抽象語法樹中修改節(jié)點(diǎn)" >”
    alt =“ Cardigan Corgi”
  />
  <figcaption>可愛的corgi！</figcaption>
</figud>

為此，我們需要轉(zhuǎn)換HTML AST，而不是降價(jià)AST，因?yàn)镸arkdown沒有一種創(chuàng)建數(shù)字或Figcaption元素的方法。幸運(yùn)的是，由于Unified與多個(gè)解析器可互操作，因此我們可以在不編寫一堆自定義代碼的情況下做到這一點(diǎn)。

將降價(jià)AST轉(zhuǎn)換為HTML AST

要將Markdown AST轉(zhuǎn)換為HTML AST，請?zhí)砑覴eform-Hearize，然后切換到將AST轉(zhuǎn)回HTML的重新構(gòu)造。

 NPM安裝插圖讀物重新構(gòu)造

在SRC/index.js中進(jìn)行以下更改以切換到rehype：

 const fs = require（'fs'）;
const Unified = require（'unified'）;
const markdown = require（'eRext-parse'）;
const備注2 heaute = require（'eREAND-HERAIMET'）;
const html = require（'rehype-stringify'）;

const contents = unified（）
	。
  。
	。
	.use（html）
	。
	.tostring（）;

console.log（內(nèi)容）;

請注意，HTML變量從RelectH-HTML更改為重新構(gòu)造 - 兩者都將AST轉(zhuǎn)換為可以將其串起為HTML的格式

如果我們運(yùn)行腳本，我們可以在AST中看到圖像元素如下：

 {
  “類型”：“元素”，
  “ tagname”：“ img”，
  “特性”： {
    “ src”：“ https：//images.dog.ceo/breeds/corgi-cardigan/n02113186_1030.jpg”，
    “ Alt”：“ Cardigan Corgi”
  }，，
  “孩子們”： []，
  “位置”： {}
}

這是圖像的HTML表示形式的AST，因此我們可以開始更改它以使用圖形元素。 （請參閱差異）

為統(tǒng)一寫一個(gè)插件

為了用圖形元素包裝我們的IMG元素，我們需要編寫一個(gè)插件。在Unified中，使用use（）方法添加插件，該方法接受插件作為第一個(gè)參數(shù)，并將任何選項(xiàng)作為第二個(gè)參數(shù)：

 .use（插件，選項(xiàng)）

插件代碼是接收選項(xiàng)的函數(shù)（在統(tǒng)一行話中稱為“附件”）。這些選項(xiàng)用于創(chuàng)建一個(gè)新功能（稱為“變壓器”），該功能接收AST并確實(shí)可以對其進(jìn)行轉(zhuǎn)換。有關(guān)插件的更多詳細(xì)信息，請查看統(tǒng)一文檔中的插件概述。

它返回的功能將接收整個(gè)AST作為參數(shù)，并且不會(huì)返回任何內(nèi)容。 （請記住，AST在全球范圍內(nèi)被突變。）創(chuàng)建一個(gè)與index.js同一文件夾中的稱為img-to-gigure.js的新文件，然后將以下內(nèi)容放置在內(nèi)部：

 Module.exports = options => tree => {
  console.log（tree）;
};

要使用此功能，我們需要將其添加到src/index.js：

 const fs = require（'fs'）;
const Unified = require（'unified'）;
const markdown = require（'eRext-parse'）;
const備注2 heaute = require（'eREAND-HERAIMET'）;
const html = require（'rehype-stringify'）;
const imgtofigure = require（'./ img-to-to-figure'）;

const contents = unified（）
  。
  。
  .use（imgtofigure）
  。
  .tostring（）;

console.log（內(nèi)容）;

如果我們運(yùn)行腳本，我們將看到整棵樹在控制臺中登錄：

 {
  類型：“根”，
  孩子們： [
    {
      類型：“元素”，
      tagname：'p'，
      特性： {}，
      孩子：[陣列]，
      位置：[對象]
    }，，
    {type：'text'，value：'\\ n'}，
    {
      類型：“元素”，
      tagname：'p'，
      特性： {}，
      孩子：[陣列]，
      位置：[對象]
    }
  ]，，
  位置： {
    開始：{行：1，列：1，偏移：0}，
    結(jié)束：{行：4，列：1，偏移：129}
  }
}

（請參閱差異）

將訪問者添加到插件

接下來，我們需要添加一個(gè)訪客。這將使我們真正了解該代碼。統(tǒng)一利用了許多帶有Unist-util-*前綴的實(shí)用程序軟件包，使我們可以在不編寫自定義代碼的情況下使用AST進(jìn)行常見的事情。

我們可以使用Unist-Util-訪問來修改節(jié)點(diǎn)。這給了我們一個(gè)參觀三個(gè)論點(diǎn)的訪問助手：

• 我們正在與之合作的整個(gè)AST
• 一個(gè)謂詞功能，以識別我們要訪問的節(jié)點(diǎn)
• 對我們想要進(jìn)行的任何更改的函數(shù)

要安裝，請?jiān)诿钚兄羞\(yùn)行以下內(nèi)容：

 NPM安裝Unist-Util-訪問

讓我們通過添加以下代碼在插件中實(shí)現(xiàn)訪問者：

 cont訪問= require（'Unist-util-visit'）;

  Module.exports = options => tree => {
    訪問（
      樹，
      //僅訪問包含IMG元素的P標(biāo)簽
      節(jié)點(diǎn)=>
        node.tagname ==='p'&& node.children.some（n => n.tagname ===='img'），
      節(jié)點(diǎn)=> {
        console.log（node）;
      }
    ）；
};

當(dāng)我們運(yùn)行此操作時(shí)，我們可以看到只有一個(gè)段落節(jié)點(diǎn)記錄了：

 {
  類型：“元素”，
  tagname：'p'，
  特性： {}，
  孩子們： [
    {
      類型：“元素”，
      tagname：'img'，
      屬性：[對象]，
      孩子們： []，
      位置：[對象]
    }，，
    {type：'text'，值：'可愛的corgi！'，位置：[object]}
  ]，，
  位置： {
    開始：{行：3，列：1，偏移：16}，
    結(jié)束：{行：3，列：102，偏移：117}
  }
}

完美的！我們只會(huì)獲得具有要修改的圖像的段落節(jié)點(diǎn)?，F(xiàn)在我們可以開始改變AST！

（請參閱差異）

將圖像包裹在圖元素中

現(xiàn)在我們已經(jīng)擁有圖像屬性，我們可以開始更改AST。請記住，因?yàn)锳ST確實(shí)可以很大，所以我們將它們變?yōu)檫m當(dāng)?shù)牡胤?，以避免?chuàng)建大量副本并可能減慢腳本的速度。

我們首先將節(jié)點(diǎn)的標(biāo)簽名更改為數(shù)字而不是段落。其余的細(xì)節(jié)現(xiàn)在可以保持不變。

在src/img-to-gigure.js中進(jìn)行以下更改：

 cont訪問= require（'Unist-util-visit'）;

Module.exports = options => tree => {
  訪問（
    樹，
    //僅訪問包含IMG元素的P標(biāo)簽
    節(jié)點(diǎn)=>
    node.tagname ==='p'&& node.children.some（n => n.tagname ===='img'），
    節(jié)點(diǎn)=> {
      node.tagname ='figie';
    }
  ）；
};

如果我們再次運(yùn)行腳本并查看輸出，我們可以看到我們越來越近了！

 <h1>你好世界！</h1>
<figug> <img  src="%E2%80%9C" alt="如何在抽象語法樹中修改節(jié)點(diǎn)" >” alt =“ cardigan corgi”>
<p>還有更多文字。</p></figug>

（請參閱差異）

將圖像旁邊的文字用作標(biāo)題

為了避免需要編寫自定義語法，我們將使用帶有圖像的任何傳遞的文本作為圖像標(biāo)題。

我們可以假設(shè)通常在Markdown中圖像沒有內(nèi)聯(lián)文字，但是值得注意的是，這可能100％會(huì)導(dǎo)致意外字幕出現(xiàn)給人們寫Markdown。我們將在本教程中承擔(dān)這種風(fēng)險(xiǎn)。如果您打算將其投入生產(chǎn)中，請確保權(quán)衡權(quán)衡取舍，并選擇最適合您的情況。

要使用文本，我們將在父節(jié)點(diǎn)內(nèi)尋找文本節(jié)點(diǎn)。如果我們找到一個(gè)，我們想抓住它的價(jià)值作為我們的標(biāo)題。如果找不到字幕，我們根本不想轉(zhuǎn)換此節(jié)點(diǎn)，因此我們可以盡早返回。

對src/img-to-gigure.js進(jìn)行以下更改以獲取標(biāo)題：

 cont訪問= require（'Unist-util-visit'）;

Module.exports = options => tree => {
  訪問（
    樹，
    //僅訪問包含IMG元素的P標(biāo)簽
    節(jié)點(diǎn)=>
    node.tagname ==='p'&& node.children.some（n => n.tagname ===='img'），
    節(jié)點(diǎn)=> {
      //找到文本節(jié)點(diǎn)
      const textNode = node.children.find（n => n.type ===='text'）;
 
      //如果沒有字幕，我們不需要轉(zhuǎn)換節(jié)點(diǎn)
      如果（！textNode）返回;
 
      const標(biāo)題= textnode.value.trim（）;
 
      console.log（{catchion}）;
      node.tagname ='figie';
    }
  ）；
};

運(yùn)行腳本，我們可以看到記錄的標(biāo)題：

 {標(biāo)題：'可愛的科吉！' }

（請參閱差異）

在圖中添加小提琴元素

現(xiàn)在我們有字幕文本，我們可以添加一個(gè)圖形以顯示它。我們可以通過創(chuàng)建一個(gè)新的節(jié)點(diǎn)并刪除舊文本節(jié)點(diǎn)來做到這一點(diǎn)，但是由于我們正在將文本節(jié)點(diǎn)更改為元素并不那么復(fù)雜。

不過，元素沒有文本，因此我們需要在Figcaption元素的孩子中添加一個(gè)新的文本節(jié)點(diǎn)來顯示字幕文本。

對src/img-to-gigure.js進(jìn)行以下更改，以將標(biāo)題添加到標(biāo)記中：

 cont訪問= require（'Unist-util-visit'）;

Module.exports = options => tree => {
  訪問（
    樹，
    //僅訪問包含IMG元素的P標(biāo)簽
    節(jié)點(diǎn)=>
      node.tagname ==='p'&& node.children.some（n => n.tagname ===='img'），
    節(jié)點(diǎn)=> {
      //找到文本節(jié)點(diǎn)
      const textNode = node.children.find（n => n.type ===='text'）;

      //如果沒有字幕，我們不需要轉(zhuǎn)換節(jié)點(diǎn)
      如果（！textNode）返回;

      const標(biāo)題= textnode.value.trim（）;
      //將文本節(jié)點(diǎn)更改為包含文本節(jié)點(diǎn)的figcaption元素
      textnode.type ='element';
      textnode.tagname ='figcaption';
      textnode.Children = [
        {
          類型：“文本”，
          價(jià)值：標(biāo)題
        }
      ];

      node.tagname ='figie';
    }
  ）；
};

如果我們使用節(jié)點(diǎn)src/index.js再次運(yùn)行腳本，我們會(huì)看到包裹在圖形元素中的轉(zhuǎn)換圖像，并用figcaption進(jìn)行了描述！

 <h1>你好世界！</h1>
<figug> <img  src="%E2%80%9C" alt="如何在抽象語法樹中修改節(jié)點(diǎn)" >”

<p>還有更多文字。</p></figug>

（請參閱差異）

將轉(zhuǎn)換的內(nèi)容保存到新文件

既然我們已經(jīng)進(jìn)行了大量轉(zhuǎn)換，我們想將這些調(diào)整保存到實(shí)際文件中，以便我們可以共享它們。

由于Markdown不包含完整的HTML文檔，因此我們將添加一個(gè)名為Rehype-Document的Rehype插件，以添加完整的文檔結(jié)構(gòu)和標(biāo)題標(biāo)簽。

通過運(yùn)行安裝：

 NPM安裝rehype-Document

接下來，對src/index.js進(jìn)行以下更改：

 const fs = require（'fs'）;
const Unified = require（'unified'）;
const markdown = require（'eRext-parse'）;
const備注2 heaute = require（'eREAND-HERAIMET'）;
const doc = require（'rehype-document'）;
const html = require（'rehype-stringify'）;

const imgtofigure = require（'./ img-to-to-figure'）;

const contents = unified（）
	。
	。
	.use（imgtofigure）
    .use（doc，{title：'轉(zhuǎn)換文檔！'}）
	.use（html）
	。
	.tostring（）;

 const outputdir =`$ {process.cwd（）}/public`;

  如果（！fs.existsync（outputdir））{
    fs.mkdirsync（outputdir）;
  }
 
  fs.WriteFileSync（`$ {outputDir}/home.html`，contents）;

再次運(yùn)行腳本，我們將能夠在Root中看到一個(gè)名為public的新文件夾，在內(nèi)部我們會(huì)看到home.html。在內(nèi)部，我們的轉(zhuǎn)換文檔保存了！

  

<meta charset="“" utf-8>
<title>轉(zhuǎn)換文檔！</title>
<meta name="“" viewport content="“" width="設(shè)備寬度，初始尺度=">


	<h1>你好世界！</h1>
	<figug> <img  src="%E2%80%9C" alt="如何在抽象語法樹中修改節(jié)點(diǎn)" >”
	<p>還有更多文字。</p>
</figug>

以上是如何在抽象語法樹中修改節(jié)點(diǎn)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！