Bootstrap-table客户端搜索未剥离HTML格式，无法匹配连续关键词

问题根源：Bootstrap-table默认的客户端搜索会直接对单元格的原始HTML内容进行匹配，比如你的「用户名」列单元格内容是<strong>Smith</strong> John，当搜索“Smith John”时，实际要匹配的字符串是Smith</strong> John，中间的HTML标签打断了连续文本，导致匹配失败。

以下是两种实用的解决方法：

方法一：全局修改搜索匹配逻辑 #

直接覆盖Bootstrap-table默认的匹配函数，让搜索前先剥离所有HTML标签：

// 覆盖默认的字符串匹配函数
$.fn.bootstrapTable.utils.matches = function (s, r) {
  // 用正则移除所有HTML标签
  const plainText = s.replace(/<[^>]+>/g, '');
  // 对纯文本进行正则匹配
  return plainText.match(r);
};

这段代码会作用于所有Bootstrap-table的客户端搜索，所有列的搜索都会先剥离HTML再匹配。

方法二：针对指定列配置搜索格式化器 #

如果只需要某几列处理HTML，可以给对应列添加data-search-formatter属性，指定剥离HTML的函数：

<table id="userTable">
  <thead>
    <tr>
      <!-- 给用户名列配置搜索格式化器 -->
      <th data-field="username" data-search-formatter="stripHtml">用户名</th>
      <th data-field="email">邮箱</th>
    </tr>
  </thead>
</table>

<script>
// 定义剥离HTML的工具函数
function stripHtml(htmlContent) {
  return htmlContent.replace(/<[^>]+>/g, '');
}

// 初始化表格
$('#userTable').bootstrapTable({
  url: '/api/users', // 你的数据接口
  pagination: true,
  search: true
});
</script>

这种方式更灵活，只会对配置了data-search-formatter的列生效。

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