在可編輯div內創建標籤標籤

我正在嘗試做的是創建一個前端可編輯標籤框（可編輯div）。無論何時用戶在該框中鍵入單詞並按下,，該框會將該單詞變成彩色標籤。我遇到的問題是：在可編輯div內創建標籤標籤

用戶鍵入第一個單詞，按逗號鍵。
這個詞然後被包裹在<a>標籤。
用戶鍵入第二個單詞，按逗號鍵。
現在，我必須保留第一個包裝詞，並且只考慮第二個詞，並將其包裝到<a>標籤中。這對我來說非常棘手，我不知道如何單獨留下第一個標籤，並選擇「自由」單詞來包裝。這也意味着只要用戶決定放置一個雙字標籤，就會將多個單詞放在一個單獨的<a>標籤中。它必須使用任意數量的標籤。

請您指點我正確的方向？我試圖用jQuery來解決這個問題。我不一定需要代碼本身，因爲我知道如何編寫代碼，我只需要在我的大腦中提出正確的算法。

來源

2015-05-29 Pe-Ter

如果你用你當前的代碼更新你的問題，並且如果可能的話，是一個jsFiddle，那將會很好。 – kosmos

我知道@kmsdev，我很樂意這麼做，但是我刪除了最後一個代碼，因爲它完全無效。問題是 - 在我編寫任何代碼之前，我需要先有一個概念，並且在這個問題中，我要求提供這樣一個概念，這個算法可以讓我編寫一些代碼。 –

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

好吧，按要求:)根據是否保持在該領域的逗號或更換後不

，用逗號分割的編輯內容的內部HTML和/要麼。

來源

2015-05-29 12:51:32 Lain

和/或'':)。 –

嘗試以下

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 
}

來源

2015-05-29 10:28:05 ravi1991

謝謝您的回答，但我認爲其中一位用戶提供了一種非常簡單的方法來實現相同的目的。儘管如此，非常感謝。 –

在可編輯div內創建標籤標籤

回答

相關問題