Excluding accents from the vue filter, using bootstrap-vue table filter feature

Question

I'm using Bootrap-vue Table and filtering results and I need help to insert a regex filter to exclude words/letters with accents.

This one is regex snippet:

string.replace('/[áàãâä]/ui', 'a');
string.replace('/[éèêë]/ui', 'e');
string.replace('/[íìîï]/ui', 'i');
string.replace('/[óòõôö]/ui', 'o');
string.replace('/[úùûü]/ui', 'u');
string.replace('/[ç]/ui', 'c');

Input to get user typing:

              <b-form-input
                id="filter-input"
                v-model="filter"
                type="search"
                placeholder="Pesquise por Zona, WhatsApp ou E-mail"
              ></b-form-input

Table:

<b-table :items="items"
                   :fields="fields"
                   :filter="filter"
                   hover
                   striped>
            <template #cell(whatsapp)="data">
              <span v-html="data.value"></span>
            </template>
            <template #cell(email)="data">
              <span v-html="data.value"></span>
            </template>
</b-table>

And finally, vue filter line:

filter: null,

So my question is: How can I fit the regex filter into the bootstrap-vue table filter, is it possible?

Answer 1

You could use a computed property that creates a regular expression from the filter property, replacing undecorated letters with the possible letter accents:

export default {
  computed: {
    computedFilter() {
      const pattern = this.filter
          .replace(/a/g, '[aáàãâä]')
          .replace(/e/g, '[eéèêë]')
          .replace(/i/g, '[iíìîï]')
          .replace(/o/g, '[oóòõôö]')
          .replace(/u/g, '[uúùûü]')
          .replace(/c/g, '[cç]')
      return new RegExp(pattern, 'ui')
    }
  }
}

Then use the computed prop in your template:

<b-table :filter="computedFilter">

demo