javascript - 用复选框替换特殊字符

Question

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

列表：学生 | 员工 | 学院

Catfitler：我想要每个类别的复选框 - 学生、教师和员工

我有一个 jquery 事件来删除特殊字符“|” 我得到了作为学生员工教师的字符串

HTML：

<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>

JS：

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();
});

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

标签： javascriptjqueryhtmlregex

Answer 1

您必须通过分隔符拆分（）您的列表|，然后遍历这个新创建的数组并附加复选框并做一些其他事情。这里有一个例子：

const list = 'Student|Employee|Faculty';
const wrapper = $('#wrapper');

list.split('|').forEach(str => {
	let cb = $('<input>', {
		type: 'checkbox',
		name: str
	});
	
	wrapper.append(cb);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='wrapper'>

</div>

从我的角度来看，您不需要任何正则表达式模式来满足您的要求。您可以按所需的任何分隔符拆分列表。