Vue.js Bootstrap Vue表格土耳其字符搜索大小写匹配异常问题

表格中存在İstanbul这类土耳其字符数据，输入小写istanbul无法匹配结果，仅输入大写İstanbul才能找到对应条目。尝试使用toLocaleLowerCase()方法未生效。

相关代码片段 #

模板与数据集 #

<template>
  <div>
    <b-table striped hover :fields="fields" :items="cities"></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        { key: 1, city: 'İstanbul' },
        { key: 2, city: 'İzmir' },
        { key: 3, city: 'Adana' },
      ],
      cityCopyArray: [
        { key: 1, city: 'İstanbul' },
        { key: 2, city: 'İzmir' },
        { key: 3, city: 'Adana' },
      ],
      fields: ["city"]
    }
  }
}
</script>

输入框代码 #

<input
:placeholder="'City Name'"
:id="'cityNamr'"
v-model="citySearchSearch"></input>

Watch监听代码 #

citySearchSearch: {
  handler(val) {
    this.cities = this.cityCopyArray.filter((city) => {
      return this.converter(city.name).includes(this.converter(val))
    })
  },
},

字符转换函数代码 #

converter(text){
  var trMap = {
    'çÇ':'c',
    'ğĞ':'g',
    'şŞ':'s',
    'üÜ':'u',
    'ıİ':'i',
    'öÖ':'o',
  };
  for(var key in trMap) {
    text = text.replace(new RegExp('['+key+']','g'), trMap[key]);
  }
  return  text.replace(/[^-a-zA-Z0-9\s]+/ig, '')
      .replace(/\s/gi, "-")
      .replace(/[-]+/gi, "-")
      .toLowerCase();
},

问题修复方案 #

1. 修正字段名错误 #

监听逻辑中使用了city.name，但数据集里的城市字段实际是city.city，这会导致过滤逻辑完全失效，需改为city.city。

2. 优化土耳其字符转换逻辑 #

原转换函数的正则处理存在缺陷，且toLocaleLowerCase()未指定土耳其语环境，导致字符转换不彻底。修改后的转换函数：

converter(text) {
  if (!text) return '';
  // 指定土耳其语环境进行大小写转换
  let normalized = text.toLocaleLowerCase('tr-TR');
  // 替换土耳其特殊字符为英文对应字符
  const trMap = {
    'ç': 'c',
    'ğ': 'g',
    'ş': 's',
    'ü': 'u',
    'ı': 'i',
    'ö': 'o'
  };
  for (const [char, replacement] of Object.entries(trMap)) {
    normalized = normalized.replace(new RegExp(char, 'g'), replacement);
  }
  // 清理多余字符（可根据需求调整）
  return normalized.replace(/[^a-z0-9\s]/g, '')
                   .replace(/\s+/g, '-')
                   .replace(/-+/g, '-');
}

3. 完善监听逻辑 #

添加空输入判断，避免空值导致的异常，同时优化性能：

citySearchSearch: {
  handler(val) {
    // 输入为空时恢复原始数据
    if (!val) {
      this.cities = [...this.cityCopyArray];
      return;
    }
    const searchStr = this.converter(val);
    this.cities = this.cityCopyArray.filter(city => {
      return this.converter(city.city).includes(searchStr);
    });
  },
  immediate: true // 初始化时执行一次过滤
}

4. 修正输入框语法错误 #

输入框的placeholder和id存在多余引号，修正为：

<input
  placeholder="City Name"
  id="cityName"
  v-model="citySearchSearch"
/>

修改完成后，输入istanbul即可正确匹配到İstanbul条目。

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