时间戳

首页 > 解决方案 > 如何创建过滤器来搜索具有特殊字符的单词，同时在没有特殊字符的输入中写入

regex - 如何创建过滤器来搜索具有特殊字符的单词，同时在没有特殊字符的输入中写入

问题描述

这是我的第一篇文章。我在 Quasar (Vue.js) 工作，我有一份工作清单，在这个清单中，我有一些特殊的词。

前任 ：

   [ ...{ "libelle": "Agent hôtelier" },{"libelle": "Agent spécialisé / Agente spécialisée des écoles maternelles -ASEM-"},{ "libelle": "Agriculteur / Agricultrice" },{ "libelle": "Aide aux personnes âgées" },{ "libelle": "Aide de cuisine" },...]

在“输入”上，我想搜索“Agent spécialisé”，但我想写“agent specialise”（没有特殊字符）或初始名称，我想写两者并自动完成我的“输入”。我只是没有找到添加到我的过滤器代码的解决方案......

我的输入：

  <q-select
    filled
    v-model="model"
    use-input
    hide-selected
    fill-input
    input-debounce="0"
    :options="options"
    hint="Votre métier"
    style="width: 250px; padding-bottom: 32px"
    @filter="filterFn"
  >
  </q-select>
</div>

我的代码：

    export default {
      props: ['data'],
      data() {
        return {
          jobList: json,
          model: '',
          options: [],
          stringOptions: []
        }
      },
      methods: {
        jsonJobsCall(e) {
          this.stringOptions = []
          json.forEach(res => {
            this.stringOptions.push(res.libelle)
          })
        },
        filterFn(val, update) {
          if (val === '') {
            update(() => {
              this.jsonJobsCall(val)
              this.options = this.stringOptions
            })
            return
          }
          update(() => {
            const regex = /é/i
            const needle = val.toLowerCase()
            this.jsonJobsCall(val)
            this.options = this.stringOptions.filter(
              v => v.replace(regex, 'e').toLowerCase().indexOf(needle) > -1
            )
          })
        },
      }
    }

总结一下：我需要在我的输入中使用或不使用特殊字符进行过滤，以便在我的列表中找到可以包含特殊字符的作业。

我希望我很清楚，如果我还没有问过你的问题。

非常感谢你。

标签： regexvuejs2

解决方案

我不确定它是否适合您，但您可以使用正则表达式根据您的需要创建有效的过滤器。例如，当有“e”字母时，您要检查“e”或“é”（如果我理解正确）

//Lets say we want to match "Agent spécialisé" with the given search text
let searchText = "Agent spe";

// Lets create a character map for matching characters
let characterMap = {
    e: ['e', 'é'],
    a: ['a', '@']
}


// Replacing special characters with a regex part which contains all equivelant characters 
// !Remember replaceAll depricated
Object.keys(characterMap).forEach((key) => {
    let replaceReg = new RegExp(`${key}`, "g")
    searchText = searchText.replace(replaceReg, `[${characterMap[key].join("|")}]`);
})

// Here we create a regex to match
let reg = new RegExp(searchText + ".*")
console.log("Agent spécialisé".match(reg) != null);

另一种方法可能与此相反。您可以规范化“Agent spécialisé”。（我的意思是用上面的正则表达式用普通的 e 替换所有 é ）并与原始文本一起存储在对象中。但是搜索这个规范化的字符串而不是原始字符串。

推荐阅读