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