在網(wǎng)站建設(shè)過程中需要將純文本轉(zhuǎn)換成格式化的HTML時，你會怎么做？從網(wǎng)站復(fù)制文本到設(shè)備的剪貼板時，很有可能在粘貼時獲得格式化的HTML。一些應(yīng)用程序和操作系統(tǒng)有一個“選擇性粘貼”功能，它會為你去掉那些標(biāo)簽，以保持當(dāng)前的風(fēng)格，但如果這個功能不可用，你該怎么辦？

將純文本轉(zhuǎn)換成格式化的HTML也是如此。將純文本轉(zhuǎn)換成HTML的最接近的方法之一是用Markdown作為一種抽象來編寫。你可能已經(jīng)在像這篇文章一樣的文章中的許多評論中看到過這樣的例子。

為用戶提供一種方式來創(chuàng)作基本的web內(nèi)容——比如評論——而無需了解HTML的任何東西，這是一種新穎的追求，因為它降低了在web上交流和合作的障礙。說它有助于網(wǎng)絡(luò)的“民主化”可能有些言過其實，但這與愿景并不沖突！

純文本到HTML的轉(zhuǎn)換器有很多假設(shè)和考慮。例如，我們是否應(yīng)該假設(shè)輸入工具的第一行文本是一個需要對應(yīng)的標(biāo)題<h1>標(biāo)簽？每一個新的行真的是一個段落嗎？鏈接的內(nèi)容如何融入其中？

同樣，這個想法是用戶應(yīng)該能夠在不知道Markdown或HTML語法的情況下編寫。這是一個很大的限制，我們可能會遇到太多的HTML元素，所以了解內(nèi)容使用的上下文是有價值的。例如，如果這是一個用于撰寫博客文章的工具，那么我們可以根據(jù)長格式內(nèi)容中常用的元素來限制支持哪些元素的范圍:<h1>, <p>, <a>，以及<img>。換句話說，可以包含頂級標(biāo)題、正文、鏈接文本和圖像。該工具不支持項目符號或有序列表、表格或任何其他元素。

前端實現(xiàn)將依賴于普通的HTML、CSS和JavaScript來建立一個具有簡單布局和將文本轉(zhuǎn)換為HTML的功能的小表單。如果您計劃將其部署到生產(chǎn)環(huán)境中，這就涉及到服務(wù)器端的問題，但是我們的重點完全放在前端。

有一些現(xiàn)有的方法可以實現(xiàn)這一點。例如，一些庫提供所見即所得編輯器。導(dǎo)入庫，如TinyMCE用單一的<script>你可以走了。所見即所得編輯器功能強(qiáng)大，支持各種格式，甚至可以將CSS類應(yīng)用于內(nèi)容以進(jìn)行樣式設(shè)置。即使我們想要的完美解決方案已經(jīng)出現(xiàn)了，我仍然想把文本轉(zhuǎn)換成HTML的概念拆開來理解它是如何工作的，并希望在這個過程中學(xué)習(xí)一些新的東西。所以，讓我們繼續(xù)我們自己的土辦法。