1

Estou tentando dar match nos type de input que existem, porém a palavra "datetime-local" está me trazendo problemas, pois se for "datetime" ele também encontra um match.

Para a minha expressão ficar correta eu preciso que ela encontre a partir de uma string de char inserida somente as palavras correspondentes a mesma, ou seja, para ser true no caso do "datetime" a palavra inserida precisaria ser "datetime-local" e não somente "datetime".

Como posso corrigir esta expressão?

 const regExpTypes = new RegExp(
      "button$|color$|date$|datetime(-local)$|email$|file$|hidden$|image$|month$|password$|radio$|range$|reset$|search$|submit$|tel$|text$|time$|url$|week$"
);
    
console.log(regExpTypes.test("datetime"));

2 Respostas 2

3

Quando você usa alternância (o caractere |), a regex vai tentando as alternativas da esquerda para a direita, até encontrar uma que sirva.

No caso, se a entrada é a string datetime, a regex não encontra o match nas 16 primeiras alternativas (inclusive na quarta - datetime(-local)$ - que procura por algo que termine com datetime-local, e veja que os parênteses não fazem diferença aqui).

Na alternativa 17 (time$) ela encontra um match, já que este trecho significa "termina com time", e datetime corresponde a isso. Por isso sua regex retorna true para a string datetime.

A sua solução funcionou porque você acrescentou ^, então a alternativa "começa com datetime-local" passa a dar match - e datetime não dá mais match porque você mudou time$ (termina com time) para ^time (começa com time).

Mas enfim, se você quer verificar se uma string corresponde exatamente a algum dos nomes que estão na regex, pode mudá-la para:

 const regExpTypes = new RegExp(
   "^(button|color|date|datetime-local|email|file|hidden|image|month|password|radio|range|reset|search|submit|tel|text|time|url|week)$"
 );
    
 console.log(regExpTypes.test("datetime")); // false
 console.log(regExpTypes.test("datetime-local")); // true

Esta regex tem os marcadores ^ e $, que são respectivamente o início e fim da string. Em seguida, entre eles há uma alternância com todas as alternativas que você quer capturar.


Repare que todas as alternativas estão entre parênteses, pois isso faz diferença.
Se eu fizer, por exemplo, ^button|color$, isso significa "começa com button, ou termina com color" - e caso comece com button, pode inclusive ter mais coisas depois; caso termine com color, pode ter mais coisas antes - veja:

 const regExpTypes = /^button|color$/;

 console.log(regExpTypes.test("button")); // true
 console.log(regExpTypes.test("button123")); // true
 console.log(regExpTypes.test("color")); // true
 console.log(regExpTypes.test("123color")); // true

Já se eu colocar ^(button|color)$, isso significa "início da string", seguido de button ou color, seguido do final da string. Ou seja, a string só pode ter o que está nas alternativas, nenhum caractere a mais, nem a menos (veja).

 const regExpTypes = /^(button|color)$/;

 console.log(regExpTypes.test("button")); // true
 console.log(regExpTypes.test("button123")); // false
 console.log(regExpTypes.test("color")); // true
 console.log(regExpTypes.test("123color")); // false

Então se você quer que a string seja exatamente alguma das alternativas, use ^(alternativas)$.


Dá para simplificar um pouco mais:

 const regExpTypes = new RegExp(
   "^(button|color|date(time-local)?|email|file|hidden|image|month|password|ra(dio|nge)|reset|search|submit|te(l|xt)|time|url|week)$"
 );
    
 console.log(regExpTypes.test("datetime")); // false
 console.log(regExpTypes.test("datetime-local")); // true

Fiz algumas modificações:

  • date(time-local)?: o trecho time-local está entre parênteses, e o ? logo depois torna-o opcional. Sendo assim, este trecho pega date ou datetime-local (mas não datetime)
  • ra(dio|nge): pega as strings radio ou range
  • te(l|xt): pega as strings tel ou text

Sem regex

Mas para este caso talvez seja mais simples ter um array com as alternativas válidas, e então verificar se a string está neste array, usando o método includes:

 const validos = ['button', 'color', 'date', 'datetime-local', 'email',
                 'file', 'hidden', 'image', 'month', 'password', 'radio',
                 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'];
    
 console.log(validos.includes("datetime")); // false
 console.log(validos.includes("datetime-local")); // true

0

A resposta do Marconi não me convém, porém utilizei o link citado pelo mesmo para fins de testes, e cheguei a seguinte conclusão que funciona do seguinte modo:

button|color$|date$|^datetime-local|email$|file$|hidden$|image$|month$|password$|radio$|range$|reset$|search$|submit$|tel$|text$|^time|url$|week$

Onde as palavras datetime-local e time, devem utilizar o operador ^ e as demais o operador $.

$

Corresponde ao final do texto. Se a flag multilinhas é setada para true, também se aplica imediatamente antes de um caractere de quebra de linha. Por exemplo, /r$/ não corresponde ao 'r' em "corre", mas acha correspondência em "correr".

^

Corresponde ao início do texto. Se a flag multilinhas é setada para true, também se aplica imediatamente após um caractere de quebra de linha. Por exemplo, /^A/ não corresponde ao 'A' em "Um Alvo", mas corresponde ao 'A' em "Alvo Encontrado".

Você deve fazer log-in para responder a esta pergunta.