Javascript 用复选框替换特殊字符

我正在构建一个类别过滤器，但类别将由最终用户确定。因此，我必须从用户那里获得一组类别，用|符号分隔，然后将它们作为复选框分隔的类别。像这样：

名单：学生|员工|教员

卡特菲勒：我想为每个类别——学生、教师和员工——设置一个复选框

我有一个jquery事件来删除特殊字符|，我以学生雇员身份获得了字符串

HTML:

我想在每个类别前面添加一个复选框。如何实现这一点？

您必须使用|分隔符对列表进行排序，然后迭代这个新创建的数组并附加复选框，然后执行其他操作。这里有一个例子：

常数列表=‘学生|员工|教员’； 常量包装器=$‘包装器’； list.split'|'。forEachstr=>{ 设cb=${ 键入：“复选框”， 姓名：str }; appendcb； };

---

这里面有几个假设，所有字符串的前缀都更有趣。 我放入一个临时元素，然后用一个真正的复选框替换它

也许应该把每一篇文章都用一个字母来包装，但这不是问题的一部分

不考虑| |项。 相当冗长，但这有利于正在发生的事情

函数removeSpl{ 设wrk=$'.work'； var ns=wrk.text； 设tempcb=； //只需删除逗号和句点-正则表达式可以执行任何字符 ns=ns.替换/[|]+/g，tempcb； ns=tempcb+ns； wrk.htmlns； 工作。找到“cb” .替换为； } $.b.一次“点击”功能{ removeSpl； }; 学生|员工|教员 删除特殊字符

---

我们可以让它只删除我们想要的内容。

这可能更难，因为学生没有前导-如果用户输入好学生|坏学生|其他学生，它会变得更有趣。我忍不住想知道，为什么不首先为用户提供复选框作为选项。将比管道分隔字符串更直观。因此，创建一个复选框元素，而不是附加html文本。是否有方法在前面添加| char并用复选框替换它？@Mark Schultheiss@Anurag Srivastava和@epascarello我给用户一个选择，将其设置为单选按钮或复选框。因此，我只需要将原始数据以|分隔，然后相应地插入一个复选框或单选按钮。尾随/前导空格呢？单个或多个单词之间的空格如何？只需使用trim方法来修剪它们。@dganenco-您的代码给了我复选框，但我希望我的输出是这样的：学生雇员教员。你的密码告诉我。你能帮我把类别分开并添加一个复选框吗？你的答案有一个小问题。如果我点击按钮两次，那么答案会变为学生-员工-教员-有没有办法解决这个问题？只要允许他们做一次我编辑了它，只允许它一次-在这个问题的范围内，这是有效的，可能还有其他方法，如禁用按钮等。

<span class="work">Student | Employee | Faculty </span>
<br>
<button class="b">remove special characters</button>
<p>We can make this remove only what we want.</p>

function removeSpl() {
  var ns = $('.work').text();
  // Just remove commas and periods - regex can do any chars
  ns = ns.replace(/([|])+/g, '');
  $('.work').text(ns)
}
$( ".b" ).click(function() {
 removeSpl();
});