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

Question

我要做的是创建一个前端可编辑标签框（可编辑div）。每当用户在该框中键入单词并按,时，此框将把该单词更改为彩色标签。我遇到的问题是：

1. 用户输入第一个单词，按逗号键。
2. 然后将该单词包装在<a>标签中。
3. 用户输入第二个单词，按逗号键。
4. 现在我必须保留第一个包装好的单词，并且只考虑第二个单词，将其包装到<a>标签中。这对我来说非常棘手，我不知道如何单独留下第一个<a>标签并选择＆＃34; free＆＃34;包装的话。这也意味着每当用户决定放置双字标签时，将多个单词包装到单个<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。