web-dev-qa-db-fra.com

Validation d'URL jQuery Youtube avec regex

Je sais qu'il y a beaucoup de réponses aux questions ici https://stackoverflow.com/questions/tagged/youtube+regex , mais je ne trouve pas de question similaire à moi.

Tout corps possède l'expression régulière JavaScript pour valider la ligne de l'URL VIDEO YouTube ci-dessous. Je veux juste savoir où une telle URL peut être possible

http://www.youtube.com/watch?v=bQVoAWSP7k4
http://www.youtube.com/watch?v=bQVoAWSP7k4&feature=popular
http://www.youtube.com/watch?v=McNqjYiFmyQ&feature=related&bhablah
http://youtube.com/watch?v=bQVoAWSP7k4

- mise à jour 1-- - mise à jour 2--

Celui-ci a fonctionné presque bien, mais a échoué pour l'URL http://youtube.com/watch?v=bQVoAWSP7k4

var matches = $('#videoUrl').val().match(/http:\/\/(?:www\.)?youtube.*watch\?v=([a-zA-Z0-9\-_]+)/);
if (matches) {
    alert('valid');
} else {
    alert('Invalid');
}
javascriptjqueryregexurlyoutube
39
Mithun Sreedharan
^http:\/\/(?:www\.)?youtube.com\/watch\?v=\w+(&\S*)?$

//if v can be anywhere in the query list

^http:\/\/(?:www\.)?youtube.com\/watch\?(?=.*v=\w+)(?:\S+)?$
20
Amarghosh

ULTIMATE YOUTUBE REGEX

Cueillette de cerises

Parce que l'explication s'allonge de plus en plus, je place le résultat final en haut. N'hésitez pas à copier + coller, et continuez votre chemin. Pour une explication détaillée, lisez "l'histoire complète" ci-dessous.

/**
 * JavaScript function to match (and return) the video Id 
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <[email protected]>
 * @url: https://stackoverflow.com/a/10315969/624466
 */
function ytVidId(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}

L'histoire complète

expression régulière d'Amarghosh semble bon, à première vue. Mais ça:

  1. ne correspond pas aux identifiants vidéo qui contiennent des tirets (-),
  2. ne valide pas la longueur de l'identifiant (v=aa et v=aaaaaaaaaaaaaaaaaa reviennent pour être valides),
  3. et ne correspond pas du tout aux URL sécurisées (http s : //youtube.com/watch? valid_params)

Pour faire correspondre https, le caractère du tiret et pour valider la longueur de l'identifiant, c'était ma suggestion initiale d'une version modifiée de l'expression régulière d'Amarghosh:

^https?:\/\/(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$

MISE À JOUR 1: URL et chaînes

Après avoir publié le modèle ci-dessus, on m'a demandé: "Et si l'url [~ # ~] [~ # ~] est comme cette;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4 "?

Tout d'abord, veuillez noter que ce n'est pas du tout une [~ # ~] URL [~ # ~] . RL conformes RFC doit commencer par le schéma! ;)

Quoi qu'il en soit, pour faire correspondre tout type de chaîne qui indique de faire référence à une vidéo YouTube, j'ai mis à jour ma réponse pour exclure le schéma d'URL requis. Ma deuxième suggestion était donc la suivante:

^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$

UPDATE 2: L'ultime expression régulière

Ensuite, on m'a demandé d'ajouter un support pour un "cas spécial"; les youtu.be URL courtes. Au départ, je ne les ai pas ajoutés, car cela ne faisait pas spécifiquement partie de la question. Cependant, j'ai mis à jour ma réponse maintenant avec tous possibles "cas spéciaux". Cela signifie que j'ai non seulement pris en charge les liens youtu.be, mais aussi les chemins de demande "/ v" et "/ embed".

Alors, puis-je vous présenter: Mon expression rationnelle finale et ultime sur Youtube:

^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

Quelles chaînes correspondent?

Maintenant, ce modèle fonctionnera pour toutes les chaînes, formatées comme suit:

Sans schéma ni sous-domaine (Domaine: youtu.be, Chemin: /) 

youtu.be/<video:id>

Sans schéma, avec sous-domaine (Domaine: youtu.be, Chemin: /) 

www.youtu.be/<video:id>

Avec schéma HTTP, sans sous-domaine (Domaine: youtu.be, Chemin: /) 

http://youtu.be/<video:id>

Avec schéma et sous-domaine HTTP (Domaine: youtu.be, Chemin: /) 

http://www.youtu.be/<video:id>

Avec le schéma HTTPS, sans sous-domaine (Domaine: youtu.be, Chemin: /) 

https://youtu.be/<video:id>

Avec schéma HTTPS et sous-domaine (Domaine: youtu.be, Chemin: /) 

https://www.youtu.be/<video:id>

Sans schéma ni sous-domaine (Domaine: youtube.com, Chemin:/incorporé) 

youtube.com/embed/<video:id>   
youtube.com/embed/<video:id>&other_params

Sans schéma, avec sous-domaine (Domaine: youtube.com, Chemin:/incorporé) 

www.youtube.com/embed/<video:id>   
www.youtube.com/embed/<video:id>&other_params

Avec schéma HTTP, sans sous-domaine (Domaine: youtube.com, Chemin:/incorporé) 

http://youtube.com/embed/<video:id>   
http://youtube.com/embed/<video:id>&other_params

Avec schéma et sous-domaine HTTP (Domaine: youtube.com, Chemin:/incorporé) 

http://www.youtube.com/embed/<video:id>   
http://www.youtube.com/embed/<video:id>&other_params

Avec le schéma HTTPS, sans sous-domaine (Domaine: youtube.com, Chemin:/incorporé) 

https://youtube.com/embed/<video:id>   
https://youtube.com/embed/<video:id>&other_params

Avec schéma et sous-domaine HTTPS (Domaine: youtube.com, Chemin:/incorporé) 

https://www.youtube.com/embed/<video:id>   
https://www.youtube.com/embed/<video:id>&other_params

Sans schéma ni sous-domaine (Domaine: youtube.com, Chemin:/v) 

youtube.com/v/<video:id>   
youtube.com/v/<video:id>&other_params

Sans schéma, avec sous-domaine (Domaine: youtube.com, Chemin:/v) 

www.youtube.com/v/<video:id>   
www.youtube.com/v/<video:id>&other_params

Avec schéma HTTP, sans sous-domaine (Domaine: youtube.com, Chemin:/v) 

http://youtube.com/v/<video:id>   
http://youtube.com/v/<video:id>&other_params

Avec schéma et sous-domaine HTTP (Domaine: youtube.com, Chemin:/v) 

http://www.youtube.com/v/<video:id>   
http://www.youtube.com/v/<video:id>&other_params

Avec le schéma HTTPS, sans sous-domaine (Domaine: youtube.com, Chemin:/v) 

https://youtube.com/v/<video:id>   
https://youtube.com/v/<video:id>&other_params

Avec schéma HTTPS et sous-domaine (Domaine: youtube.com, Chemin:/v) 

https://www.youtube.com/v/<video:id>   
https://www.youtube.com/v/<video:id>&other_params

Sans schéma ni sous-domaine (Domaine: youtube.com, Chemin:/watch) 

youtube.com/watch?v=<video:id>   
youtube.com/watch?v=<video:id>&other_params   
youtube.com/watch?other_params&v=<video:id> 
youtube.com/watch?other_params&v=<video:id>&more_params

Sans schéma, avec sous-domaine (Domaine: youtube.com, Chemin:/watch) 

www.youtube.com/watch?v=<video:id>   
www.youtube.com/watch?v=<video:id>&other_params   
www.youtube.com/watch?other_params&v=<video:id>  
www.youtube.com/watch?other_params&v=<video:id>&more_params

Avec schéma HTTP, sans sous-domaine (Domaine: youtube.com, Chemin:/watch) 

http://youtube.com/watch?v=<video:id>   
http://youtube.com/watch?v=<video:id>&other_params   
http://youtube.com/watch?other_params&v=<video:id>   
http://youtube.com/watch?other_params&v=<video:id>&more_params

Avec schéma et sous-domaine HTTP (Domaine: youtube.com, Chemin:/watch) 

http://www.youtube.com/watch?v=<video:id>   
http://www.youtube.com/watch?v=<video:id>&other_params   
http://www.youtube.com/watch?other_params&v=<video:id>   
http://www.youtube.com/watch?other_params&v=<video:id>&more_params

Avec le schéma HTTPS, sans sous-domaine (Domaine: youtube.com, Chemin:/watch) 

https://youtube.com/watch?v=<video:id>   
https://youtube.com/watch?v=<video:id>&other_params   
https://youtube.com/watch?other_params&v=<video:id>   
https://youtube.com/watch?other_params&v=<video:id>&more_params

Avec schéma HTTPS et sous-domaine (Domaine: youtube.com, Chemin:/watch) 

https://www.youtube.com/watch?v=<video:id>   
https://www.youtube.com/watch?v=<video:id>&other_params   
https://www.youtube.com/watch?other_params&v=<video:id>
https://www.youtube.com/watch?other_params&v=<video:id>&more_params

UTILISATION FONCTIONNELLE

La façon la plus simple d'utiliser le motif est de l'envelopper dans une fonction telle que celle-ci:

/**
 * JavaScript function to match (and return) the video Id
 * of any valid Youtube Url, given as input string.
 * @author: Stephan Schmitz <[email protected]>
 * @url: https://stackoverflow.com/a/10315969/624466
 */
function ytVidId(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  return (url.match(p)) ? RegExp.$1 : false;
}

// for example snippet only!
document.body.addEventListener('click', function(e) {
    if (e.target.className == 'yt-url' && 'undefined' !== e.target.value) {
        var ytId = ytVidId(e.target.value);
        alert(e.target.value + "\r\nResult: " + (!ytId ? 'false' : ytId));
    }
}, false);
<!-- Click the buttons to probe URLs -->
<input type="button" value="https://www.youtube.com/watch?v=p-e2G_VcTms&feature=g-logo&context=G29aead6FOAAAAAAABAA" class="yt-url">
<input type="button" value="https://www.youtube.com/latest" class="yt-url">

Si le type de la valeur de résultat de la fonction doit être une valeur booléenne, remplacez simplement RegExp.$1 Par true. C'est ça.

Une dernière note sur la longueur de l'identifiant vidéo : On a demandé si les identifiants ont une longueur fixe de 11 caractères? et si cela pouvait changer à l'avenir?

La meilleure réponse à cette question est probablement aussi la seule déclaration "officielle" que j'ai trouvée ici et qui dit: "Je ne vois nulle part dans la documentation où nous nous engageons officiellement à une longueur standard de 11 caractères pour les identifiants vidéo YouTube. C'est l'une de ces choses où nous avons une implémentation actuelle, et cela peut rester ainsi indéfiniment. Mais nous n'offrons aucun engagement officiel à ce sujet, alors procédez à vos risques et périls . "

179
eyecatchUp

Vous ne pouvez pas faire correspondre la partie id avec\w +, car elle n'inclut pas le caractère tiret (-). [a-zA-Z0-9 _-] + serait quelque chose de plus correct.

4
safdsas

@eyecatchup ubove a une excellente expression régulière, mais avec l'aide de regexper.com, j'ai vu que son expression régulière passera toute URL youtube où le paramètre? v avait une valeur de n'importe quel mot ou signe - répété 11 fois. Mais YouTube restreint spécifiquement l'ID de la vidéo à 11 caractères, donc un correctif pour son expression régulière serait

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((.|-){11})(?:\S+)?$/

comparer la visualisation de son regex

http://www.regexper.com/#/%5E%28?:https?:%5C/%5C/%29?%28?:www%5C.%29?%28?:youtu%5C.be%5C/%7Cyoutube%5C.com%5C/%28?:embed%5C/%7Cv%5C/%7Cwatch%5C?v=%7Cwatch%5C?.%2b&v=%29%29%28%28%5Cw%7C-%29%7B11%7D%29%28?:%5CS%2b%29?$/

et ma solution

http://www.regexper.com/#%2F%5E(%3F%3Ahttps%3F%3A%5C%2F%5C%2F)%3F(%3F%3Awww%5C.)%3F(%3F%3Ayoutu%5C.be%5C%2F%7Cyoutube%5C.com%5C%2F(%3F%3Aembed%5C%2F%7Cv%5C%2F%7Cwatch%5C%3Fv%3D%7Cwatch%5C%3F.%2B%26v%3D))((%5Ba-zA-Z0-9%5D%7C-)%7B11%7D)(%3F%3A%5CS%2B)%3F%24%2F

comme une modification de la limite de 11 caractères changeant à l'avenir, alors l'expression régulière signifierait que tout mot ou - devrait être répété exactement 11 fois, pour que ma correction soit

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11,})(?:\S+)?$/
2
Blagoj Atanasovski

Amélioration du grand regex de @ eyecatchUp:

  1. Ajouter la prise en charge du domaine m.youtube.com
  2. Ajouter la prise en charge du domaine youtube-nocookie.com par @Nijikokun
^(?:https?:\/\/)?(?:(?:www|m)\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

Regexper:

http://regexper.com/#%5E(%3F%3Ahttps%3F%3A%5C%2F%5C%2F)%3F(%3F%3A(%3F%3Awww%7Cm)%5C.)%3F(%3F%3Ayoutu%5C.be%5C%2F%7Cyoutube(%3F%3A-nocookie)%3F%5C.com%5C%2F(%3F%3Aembed%5C%2F%7Cv%5C%2F%7Cwatch%5C%3Fv%3D%7Cwatch%5C%3F.%2B%26v%3D))((%5Cw%7C-)%7B11%7D)(%3F%3A%5CS%2B)%3F%24
1
Mrskman