使用jQuery/Laravel8在tagsInput组件显示数据时如何去除多余符号

问题原因 #

你从数据库取出的html.data.adm_email是JSON格式的字符串，不是JavaScript数组对象，直接传给tagsinput('add')方法时，会把整个字符串当作单个标签处理，因此会出现["等多余符号，且所有邮箱都在同一个标签内。

解决方法 #

先将JSON字符串解析为数组，再遍历逐个添加标签即可：

$("input[data-role=tagsinput]").tagsinput('removeAll');
// 解析JSON字符串为数组
const admEmailList = JSON.parse(html.data.adm_email);
// 遍历逐个添加标签
admEmailList.forEach(email => {
  $("input[data-role=tagsinput]").tagsinput('add', email.trim());
});

如果需要兼容异常场景（比如数据格式错误时避免页面报错），可以加上异常捕获逻辑：

$("input[data-role=tagsinput]").tagsinput('removeAll');
try {
  const admEmailList = JSON.parse(html.data.adm_email);
  admEmailList.forEach(email => {
    // 过滤空值
    if (email) {
      $("input[data-role=tagsinput]").tagsinput('add', email.trim());
    }
  });
} catch (err) {
  console.error('邮箱数据解析失败：', err);
}

内容的提问来源于stack exchange，提问作者saadia