開發者工具 · HTML WYSIWYG 編輯器

從 DOM 到標記：innerHTML 序列化如何塑造您所獲得的 HTML

2026年2月19日 · 工作原理

html html 實體開發人員工作流程

解釋了瀏覽器在將 DOM 樹轉回 HTML 字串時遵循的規則，從轉義和實體到 void 元素和屬性引用，以及為什麼編輯器輸出看起來像這樣。

為什麼 在此消毒劑中返回為

包含 ` ` 的來源片段將此清理程序保留為 ` `。這個結果並不能證明每個瀏覽器都使用斜線序列化 HTML。這是 ToolAcre 字串重寫器特意選擇的，其 void-element 分支為允許的 br 和 hr 元素發出空格和斜杠。

這種差異可以防止常見的錯誤解釋。視覺表面透過innerHTML 讀取，但複製的原始程式碼隨後由應用程式程式碼標記並重建。使用者收到的內容反映了瀏覽器建立的 DOM 字串和 ToolAcre 的較窄輸出約定，包括別名、過濾屬性和平衡標籤。

分詞器掃描字符，無需建構 DOM 節點或呼叫 DOMParser。它識別文字、註釋、宣告、開始標籤、結束標籤和原始文字元素主體。消毒會重複這個平坦的順序，保持允許的結構，打開普通的未知包裝紙並壓制危險的容器及其內容物。

因此，原始拼字不會保留。混合大小寫的名稱變成小寫； b 變成 Strong，i 變成 em，strike 和 del 變成 s，ins 變成 u。輸出是從接受的標記重新產生的，而不是作為原始子字串返回，因此來源格式和不支援的細節在設計上消失了。

文字先進行實體解碼，然後再轉義。 & 符號變成 `&`，小於號和大於號變成 `<` 和 `>`，禁止的控製字元消失。此順序使現有的 `&` 在重複傳遞中保持穩定，而不是將其轉換為 `&amp;`。

屬性值遵循更嚴格的轉義路徑，該路徑也引用雙引號、單引號、尖括號和與號。在發出接受的屬性之前對已知實體進行解碼。這些測試固定文字和連結查詢的冪等性，但程式碼不保證保留每個作者實體的拼寫，例如命名與數字引用。

在輸出集中僅允許 br 和 hr 並將其分類為 void。他們永遠不會收到結束標籤。對於允許的非 void 元素，開棧記錄巢狀。交叉閉合（例如 em 周圍的強）會導致內部元素首先閉合，從而產生平衡的標記，而不是保留格式錯誤的順序。

未閉合的元素在末端閉合，而雜散的閉合標記將被忽略。這是重寫者的平衡策略，並不是瀏覽器 HTML5 錯誤復原的完整實作。來源本身警告解析器差異，這就是為什麼輸出不能作為通用敵對輸入清理程序進行銷售的原因。

沒有通用屬性包存在。段落和標題不允許；連結允許使用 href 和標題；標題允許使用縮寫；引文允許引用；有序列表允許開始和鍵入。每個發出的值都用雙引號引起來，接受的連結也會獲得 `rel="noopener noreferrer nofollow"`。

屬性順序遵循接受的標記和新增的 rel 欄位，但依賴順序是脆弱的。含義存在於允許的名稱和值中。格式錯誤的整數開頭會被刪除，不安全的 href 或引用方案會被拒絕，未知的屬性會產生刪除原因，而不是默默地成為已發布標記的一部分。

嘗試`A & B <a href="javascript:alert(1)">open</a>`。類別被刪除，B 映射到強，現有的 & 符號仍然是轉義的 & 符號，br 變為自關閉，不安全連結失去其 href，同時保留可見的連結文字。

漂亮的來源模式然後將支援的區塊元素放置在行和縮排清單子項目上。它將內聯內容保留在一起並保留 pre 中的文字。格式化是對已經重寫的輸出的可讀性傳遞；它不是第二個安全解析器，並不會恢復早期規範化刪除的空白。

本文一般不描述本機瀏覽器序列化保證、XMLSerializer、XHTML 語法或可選的 HTML 結束標記規則。它記錄了此儲存庫中可觀察到的約定。特別省略有關 ` ` 的宣告，因為本地實體表（而不是通用瀏覽器序列化程序）確定可識別的命名引用。

預覽產生器再次清理並將片段包裝在完整的淺色主題檔案中。複製 HTML 返回片段；下載 HTML 返回該檔案。這些是故意不同的工件。在假設下載的檔案與複製的來源位元組相同之前，請先閱讀操作標籤。

透過以下階段來預測 ToolAcre：標記字串、解碼支援的實體、應用元素別名和白名單、檢查 URL、平衡接受的標籤、轉義輸出以及可選的漂亮列印。該序列比說 innerHTML 只是保留或序列化作者的原始程式碼更準確地解釋了實際結果。

在處理長草稿之前，使用來源模式以小夾具觀察重寫情況。清理程序拒絕超過 500,000 字元的文件，因此過大的輸入會失敗，而不是凍結分頁。將目標自己的 HTML 策略與該編輯器故意壓縮的子集分開。