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?
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">