Javascript 在可编辑div中创建标记标签

我试图做的是创建一个前端可编辑标记框（editable div）。每当用户在该框中键入一个单词并按

，

此框将该单词更改为彩色标签。我遇到的问题是：

用户键入输入的第一个单词，然后按逗号键

然后将单词包装在

标记中

用户输入第二个单词，按逗号键

现在，我必须保留第一个已包装的单词，并且只考虑第二个单词，以便将其包装到

标记中。这对我来说非常棘手，我不知道如何离开第一个

标签，选择“免费”字进行包装。这也意味着每当用户决定放置两个单词的标记时，都要将多个单词包装到一个

标记中。它必须使用任意数量的标签

你能给我指一下正确的方向吗？我正试图用jQuery解决这个问题。我不一定需要代码本身，因为我知道如何编写它，我只需要在脑子里想出正确的算法。

试试下面的方法

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
}

函数wrapInLink（容器）{
var link_text=$（container.text（）.split（'，'）.slice（-1.pop（）；//查找要替换为anghor标记的字符串
var html=$（container.html（）；//获取容器html
html=html.replace（link_text，“”；//用锚标记替换链接文本
$（container.html（html）；//替换容器的html
}

好的，按要求：）

---

根据替换后是否在字段中保留逗号，将可编辑内容的内部HTML拆分为逗号和/或。

如果您使用当前代码更新问题，如果可能的话，还可以使用JSFIDLE。我知道@kmsdev，我很乐意这样做，但我删除了我最后的代码，因为它完全无效。问题是-在我写任何代码之前，我需要先有一个概念，在这个问题中，我要求有这样一个概念，一个允许我写一些代码的算法。取决于替换后是否在字段中保留逗号，用逗号和/或分割可编辑内容的内部HTML。@Lain-用

分割实际上是个好主意。我很惊讶我没有想到这一点。你愿意把它作为一个答案贴出来，这样我就可以把它标记为正确的吗？@Pe Ter：我认为不值得自己给出一个答案，但如果在这里就是这样做的话，我可以这样做。谢谢你的回答，但我想其中一个用户提供了一个非常简单的方法来实现同样的目标。不过，非常感谢。[…]和/或

：）。