1
resposta

Porque ao adicionar colchete [ na busca o mecanismode busca é quebrado

Ao inserir o caracter [ na busca uma exceção aparece no console. É preciso dar o refresh na pagina para voltar a funcionar. Gostaria de saber o pq da exceção? Como poderiámos resolver esse problema? Existe alguma forma de tratar esse error de forma que nao seja necessario o refresh e o mecanismo da busca não pare de funcionar?

vue.esm.js?efeb:578 [Vue warn]: Error in render: "SyntaxError: Invalid regular expression: /[/: Unterminated character class"

found in

---> <App> at src/App.vue
       <Root>
warn @ vue.esm.js?efeb:578
logError @ vue.esm.js?efeb:1713
globalHandleError @ vue.esm.js?efeb:1708
handleError @ vue.esm.js?efeb:1697
Vue._render @ vue.esm.js?efeb:4476
updateComponent @ vue.esm.js?efeb:2765
get @ vue.esm.js?efeb:3115
run @ vue.esm.js?efeb:3192
flushSchedulerQueue @ vue.esm.js?efeb:2954
(anonymous) @ vue.esm.js?efeb:1813
flushCallbacks @ vue.esm.js?efeb:1734
vue.esm.js?efeb:1717 SyntaxError: Invalid regular expression: /[/: Unterminated character class
    at new RegExp (<anonymous>)
    at VueComponent.fotosComFiltro (App.vue?ea99:41)
    at Watcher.get (vue.esm.js?efeb:3115)
    at Watcher.evaluate (vue.esm.js?efeb:3222)
    at VueComponent.computedGetter [as fotosComFiltro] (vue.esm.js?efeb:3474)
    at Object.get (vue.esm.js?efeb:1920)
    at Proxy.render (App.vue?3a25:23)
    at VueComponent.Vue._render (vue.esm.js?efeb:4474)
    at VueComponent.updateComponent (vue.esm.js?efeb:2765)
    at Watcher.get (vue.esm.js?efeb:3115)
1 resposta

Se eu entendi o seu problema corretamente eu o resolvi do seguinte modo:

# código omitido
const SpecialCharsRegExp = /[-[\]{}()*+?.,\\^$|#\s]/g;
export default {
  computed: {
    filteredPhotos() {
      if (!this.filter) return this.photos;

      let seeked = new RegExp(
        this.filter.trim().replace(SpecialCharsRegExp, "\\$&"),
        "i"
      );
      return this.photos.filter(p => seeked.test(p.titulo));
    }
  },
# código omitido

O problema acontece devido ao fato de '[' ser um caractere especial para expressões regulares, a solução adotada consiste em utilizar a função 'replace' para inserir o caractere '\' antes de todos os caracteres especiais, deste modo eles serão considerados caracteres comuns.