3

Tenho um campo num formulário que só pode aceitar URLs do Youtube ou do Vimeo. Tendo isso, encontrei a seguinte regex:

(?:(?i)(?:https:|http:)?\/\/)?(?:(?i)(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+))

Testada aqui: https://regex101.com/r/PVdjg0/2

Porém, ao adicionar essa REGEX no input via atributo pattern, a mesma está aceitando qualquer URL.

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form>
            <input type='url' required pattern='(?:(?i)(?:https:|http:)?\/\/)?(?:(?i)(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+))' title='URL Vimeo/Youtube.' name='video' placeholder='Video URL' />
            <input type='submit'>
        </form>
    </body>
</html>

O que está acontecendo? O que foi feito incorretamente?

1 Resposta 1

3

O problema de expressões regulares é que elas não funcionam exatamente da mesma forma em todas as linguagens/engines/API's, e um recurso que existe em uma não necessariamente será suportado em outra.

No caso do JavaScript, ele não suporta as flags inline, como o (?i) (que serve para tornar a expressão case insensitive, ou seja, não diferenciar letras maiúsculas de minúsculas). E a documentação diz que a expressão deve ser uma regex válida em JavaScript, e quando a expressão é inválida, o atributo pattern é ignorado.

Inclusive no regex101.com, no menu do lado esquerdo existe a opção FLAVOR para você escolher a engine de regex. E se você escolher "ECMAScript (JavaScript)", verá que a expressão de fato é inválida, por causa do (?i).

Se você retirar esta flag, a expressão funciona. Mas ela deixa de ser case insensitive, então não vai mais aceitar coisas como "WWW.youTubE.Com", por exemplo:

<form>
  <input id="campo" type="text" pattern="(?:(?:https?:)?\/\/)?(?:(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+))" required />
  <input type="submit" value="ok">
</form>

Mudei o trecho (?:https:|http:) para (?:https?:) (o s? indica que a letra "s" é opcional).


Se quiser fazer a validação case insensitive, o jeito é fazer fora do input:

let regex = /^((?:(?:https?:)?\/\/)?(?:(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+)))$/i;
document.querySelector('#form').addEventListener('submit', function(event) {
    let url = document.querySelector('#campo').value;
    if (regex.test(url)) return true;

    alert('URL inválida');
    event.preventDefault();
    return false;
});
<form id="form">
  <input id="campo" type="text" required />
  <input type="submit" value="ok">
</form>

Repare que criei a regex usando /etc.../i - o "i" no final indica que ela é case insensitive. E também incluí os marcadores ^ e $, que indicam o início e fim da string, para garantir que o campo só tem o que está especificado pela regex (no atributo pattern não é necessário, pois por default ele já considera que o campo só pode ter o que está na regex).

Infelizmente não há como fazer de maneira prática no próprio pattern do input. Uma "solução" (que de tão horrível, eu considero uma gambiarra horrenda, não use), seria em vez de youtube, colocar [Yy][Oo][Uu][Tt][uU][Bb][Ee] (e faça isso para todas as letras que quer case insensitive). Mas fica - na minha opinião - ruim demais, eu prefiro a segunda solução sugerida acima, fazendo a validação no JavaScript mesmo, fora do pattern.

Mas se quer que apenas o ID do vídeo seja case insensitive, basta mudar para (?<YoutubeID>[a-zA-Z0-9-_]{11,12}) - adicionando A-Z, ela também considera letras maiúsculas.

7
  • 1
    @MaykelEsser Como eu já disse, no pattern não tem como. A menos que você faça uma coisa horrível: para cada letra, coloque a opção maiúscula e minúscula, ou seja, em vez de youtube, ficaria [Yy][Oo][Uu][Tt][uU][Bb][Ee] - enfim, uma solução bem "nojenta", mas que "funciona" (nesse caso, eu prefiro fazer no JavaScript mesmo, conforme explicado acima) - de qq forma, atualizei a resposta com essa opção horrível :-)
    – hkotsubo
    15/06/2020 às 19:39
  • 2
    O problema de expressões regulares é que elas não são regulares hahaha
    – Woss
    15/06/2020 às 19:41
  • 1
    @MaykelEsser Se quer que apenas o ID do vídeo seja case insensitive (e o resto da URL não, ou seja, o www.youtube.com), dá pra usar (?<YoutubeID>[a-zA-Z0-9-_]{11,12}) - atualizei a resposta, coloquei essa opção no final. Senão, só usando a "solução horrível"
    – hkotsubo
    15/06/2020 às 19:44
  • 1
    @Woss Pior é que elas não são mesmo: stackoverflow.com/q/36283119
    – hkotsubo
    15/06/2020 às 19:54
  • 1
    @hkotsubo funcionou direitinho com o teu último ajuste! <3 15/06/2020 às 19:56

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .