用適合JavaScript的HTML包裝降價

Question

我有一個內容編輯<div>。

當在div中輸入正確的markdown語法時，我需要它在外部添加正確的HTML，但在其中保留標記的字符。例如：

# My H1 

將被解析到

<h1># My H1</h1> 

這是類似的iA作家的行爲方式，而且我認爲笑談確實也是如此。

那裏的任何東西都是這樣的嗎？

Answer 1

聽起來像一個整潔的項目。

如果您使用的是content-editable，並且您想在輸入內容時更新用戶的輸入內容，那麼您可能需要深入瞭解一些相當粗糙的內容，特別是如果您要支持IE。

我已經寫了兩個非常小的庫Caret和Wysiwyg可以幫助，看看每個樣本。

您可以使用插入符來觀察用戶的輸入，然後使用Wysiwyg來執行諸如將行包裝在h1標記中。線條包裝有點棘手，不過你可以看看Caret的源代碼。

即使你不使用任何一個庫，他們應該讓你開始。

Answer 2

在我的理解中，您正試圖用一種語法高亮創建一個Markdown編輯器。我喜歡這個主意，但我認爲現在還沒有這樣的東西。 Markdown被設計爲"easy-to-read/easy-to-write"，足以避免使用複雜的編輯器。例如Pagedown對這個原則有點不利（即使它是一個很好的工具）。

無論如何，如果你想要實現自己會擁有多種選擇：降價轉換器的

• 上游通過改變

  # My H1 
  

  到

  # # My H1 
  

• 下游降價轉換器通過更改

  <h1>My H1</h1> 
  

  到

  <h1># My H1</h1> 
  

  但是，這並不是因爲降價是不是雙射的，我想你不希望有這種轉換的首選方式：

  My H1 
  ===== 
  

  到

  <h1># My H1</h1> 
  

• 修改降價轉換器，如果你有權訪問源代碼或創建你自己的。

在任何情況下，您都必須流利地使用正則表達式。

Answer 3

，如果你正在處理一個很好形成DOM - 看看jQuery的包裝功能

.wrap() 
.wrapAll() 
.wrapInner() 

Answer 4

您可以開始閱讀關於this stackoverflow question的內容。

您可以使用方法拆分和載體返回作爲正則表達式來分析行中的文本。然後將文本分成一個數組，您可以使用document.createElement()動態創建新元素，如h1標籤。然後將這些標籤添加到內容顯示器，您將完成格式。

你必須要注意，有很多工作要做的，因爲你必須考慮到多種情況：

1. 如果文本只是格式化會發生什麼
2. 與所述文本會發生什麼不是
3. ¿每次用戶輸入字母時都要檢查一下嗎？
4. ¿怎麼樣格式化一個完整的數組？

一旦認爲所有這些技巧和一點點的JavaScript代碼，你會擁有它。

UPDATE：當然，如果你想用自己的語法策略創建自己的庫（我建議將它與jQuery混合使用）。如果這不是你的目的，你可以帶一些已發佈在其他答案上的圖書館。