在可編輯的div中創建標簽標簽

Question

我想做的是創建一個前端可編輯標記框（可編輯div）。 每當用戶在該框中鍵入單詞並按時,該框都會將該單詞更改為彩色標簽。 我遇到的問題是：

1. 用戶輸入第一個單詞，然后按逗號鍵。
2. 然后將單詞包裝在<a>標記中。
3. 用戶輸入第二個單詞，然后按逗號鍵。
4. 現在，我必須保留第一個包裝的單詞，並只考慮第二個單詞將其包裝到<a>標記中。 對我來說，這非常棘手，我不知道如何將第一個<a>標記保留<a> ，並選擇“ free”字樣進行換行。 這還意味着每當用戶決定放置兩個單詞的標簽時，將多個單詞包裝到單個<a>標簽中。 它必須與任何數量的標簽一起使用。

您能指出我正確的方向嗎？ 我正在嘗試使用jQuery解決此問題。 我不一定需要代碼本身，因為我知道如何編寫代碼，我只需要在大腦中提出正確的算法即可。

Answer 1

嘗試跟隨

function wrapInLink(container){
  var link_text = $(container).text().split(',').slice(-1).pop(); // finding the string for replacing with anghor tag
  var html = $(container).html(); // getting the container html
  html = html.replace(link_text, "<a href='link_to_be_given'>" + link_text + "</a>"); // replacing the link text with anchor tag
  $(container).html(html); // replacing the container's html
}

Answer 2

好的，按要求:)

根據替換后是否在字段中保留逗號，用逗號和/或拆分可編輯內容的內部HTML。