Bootstrap Tags-Input插件HTML符号编码异常（&转&amp;）求助

云上老周

2026-5-20

解决Bootstrap Tags-Input中&被重复转义为&的问题

我之前也踩过这个HTML实体重复转义的坑！核心原因是Bootstrap Tags-Input的refresh方法在重新渲染标签时，会对标签文本再次执行HTML编码，导致已经转义的&被二次转义成&amp;。下面给你几个不用修改库的解决方案，按优先级排序：

1. 去掉多余的`refresh`调用

首先你可以试试直接删掉tagsinput('refresh')这一行。因为tagsinput('add', keyword)方法本身就会自动触发标签的渲染更新，额外调用refresh完全是画蛇添足，这也是导致重复转义的直接原因。

修改后的代码：

jQuery("#txtKeywords").tagsinput('add', keyword);
// 移除下面这行，不需要手动触发refresh
// jQuery('#txtKeywords').tagsinput('refresh');

2. 关闭插件的HTML编码功能（按需使用）

如果你的标签内容都是纯文本（没有需要解析的HTML），可以在初始化Tags-Input时设置encode: false，这样插件就不会自动转义HTML实体，从根源上避免重复转义：

初始化示例：

jQuery("#txtKeywords").tagsinput({
  encode: false,
  // 其他你的配置项
});

⚠️ 注意：如果标签包含用户输入的HTML内容，关闭编码可能带来XSS风险，只在确定标签是纯文本时用这个方案。

3. 手动修复转义文本（万不得已时）

如果上面两种方法都不适用，你可以在调用refresh前，先把标签里的&转回&，再重新渲染：

// 添加标签
jQuery("#txtKeywords").tagsinput('add', keyword);

// 获取所有标签并修复重复转义的内容
var tags = jQuery("#txtKeywords").tagsinput('items');
tags.forEach(tag => {
  tag.text = tag.text.replace(/&amp;/g, '&');
});

// 再执行refresh
jQuery('#txtKeywords').tagsinput('refresh');