Yocker
  1. Yocker
  3. jQuery Youtube URL Validazione con regex
Intereting Posts
Prova dallo script della shell se la porta TCP remota è aperta jQuery + RGBA animazioni di colore hide le formule nella barra della formula Qual è il modo migliore per passare le informazioni tra i thread? Come aumentare il numero di colonne usando R in Linux Nessuna eccezione durante il casting di tipo con un valore null in java Qual è il punto dei puntatori di funzione? facendo un’azione di pulizia appena prima che node.js esca Esiste un algoritmo efficiente per generare uno scafo concavo 2D? Richiesta HTTP molto grande rispetto a molte piccole richieste Qual è l’algoritmo ottimale per generare un numero intero casuale imparziale in un intervallo? Ordine di eventi ‘Form. Caricamento’, ‘Form. Riproduzione’ e ‘Form. Attivato’ in Windows Form Set-Cookie sul browser con richiesta Ajax tramite CORS ggplot: come cambiare le etichette delle sfaccettature? A cosa serve fare while (0) quando definiamo una macro?

jQuery Youtube URL Validazione con regex

So che c’è un sacco di domande a cui rispondere qui https://stackoverflow.com/questions/tagged/youtube+regex , ma non in grado di trovare una domanda simile a me.

Qualsiasi corpo ha l’espressione regolare JavaScript per convalidare la riga dell’URL VIDEO YouTube sotto elencata. Voglio solo sapere dove un tale URL può essere ansible 

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

– aggiornamento 1– – aggiornamento 2–

Questo ha funzionato quasi bene, ma non è riuscito per 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'); } 

 ^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+)?$

ULTIMATE YOUTUBE REGEX

raccogliere le ciliegie

Poiché la spiegazione si allunga sempre più, posiziono il risultato finale in cima. Sentiti libero di copiare + incollare e andare per la tua strada. Per una spiegazione dettagliata, leggi “la storia completa” di seguito. 

 /** * JavaScript function to match (and return) the video Id * of any valid Youtube Url, given as input string. * @author: Stephan Schmitz  * @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; }

La storia completa

La regex di Amarghosh sembra buona, a prima vista. Ma ciò:

  1. non corrisponde all’id del video che include i trattini (-),
  2. non convalida la lunghezza id ( v=aa e v=aaaaaaaaaaaaaaaaaa ritorno ad essere valido),
  3. e non corrisponde affatto agli URL protetti (http: //youtube.com/watch? valid_params)

Per abbinare https, il carattere di trattino e per convalidare la lunghezza dell’ID, questo era il mio suggerimento iniziale di una versione modificata della regex di Amarghosh:

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

AGGIORNAMENTO 1: URL contro stringhe

Dopo aver postato il pattern sopra, mi è stato chiesto: “Che cosa succede se l’ URL è come questo;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4 “ ?

Prima di tutto, si prega di notare che questo non è un URL . Gli URL conformi a RFC devono iniziare con lo schema! 😉

In ogni caso, per abbinare qualsiasi tipo di stringa che indica di fare riferimento a un video di YouTube, ho aggiornato la mia risposta per escludere lo schema URL richiesto. Quindi il mio secondo suggerimento era il seguente:

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

AGGIORNAMENTO 2: La regex definitiva

Poi mi è stato chiesto di aggiungere il supporto per un “caso speciale”; i tuoi url brevi. Inizialmente non li ho aggiunti, poiché non faceva specificamente parte della domanda. Tuttavia ho aggiornato la mia risposta ora con tutti i possibili “casi speciali” . Ciò significa che non solo ho aggiunto il supporto per i collegamenti youtu.be, ma anche i percorsi di richiesta “/ v” e “/ embed”.

Quindi, posso introdurre: La mia ultima ed ultima regex di Youtube:

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

Quali stringhe sono abbinate?

Ora questo modello funzionerà per qualsiasi stringa, formattato come segue:

Senza schema e sottodominio (Dominio: youtu.be, Percorso: /) 

 youtu.be/

Senza schema, con sottodominio (Dominio: youtu.be, Percorso: /) 

 www.youtu.be/

Con schema HTTP, senza sottodominio (Dominio: youtu.be, Percorso: /) 

 http://youtu.be/

Con schema HTTP e sottodominio (Dominio: youtu.be, Percorso: /) 

 http://www.youtu.be/

Con schema HTTPS, senza sottodominio (Dominio: youtu.be, Percorso: /) 

 https://youtu.be/

Con schema HTTPS e sottodominio (Dominio: youtu.be, Percorso: /) 

 https://www.youtu.be/

Senza schema e sottodominio (Dominio: youtube.com, Percorso: / embed) 

 youtube.com/embed/ youtube.com/embed/&other_params

Senza schema, con sottodominio (Dominio: youtube.com, Percorso: / embed) 

 www.youtube.com/embed/ www.youtube.com/embed/&other_params

Con schema HTTP, senza sottodominio (Dominio: youtube.com, Percorso: / embed) 

 http://youtube.com/embed/ http://youtube.com/embed/&other_params

Con schema HTTP e sottodominio (Dominio: youtube.com, Percorso: / embed) 

 http://www.youtube.com/embed/ http://www.youtube.com/embed/&other_params

Con schema HTTPS, senza sottodominio (Dominio: youtube.com, Percorso: / embed) 

 https://youtube.com/embed/ https://youtube.com/embed/&other_params

Con schema HTTPS e sottodominio (Dominio: youtube.com, Percorso: / embed) 

 https://www.youtube.com/embed/ https://www.youtube.com/embed/&other_params

Senza schema e sottodominio (Dominio: youtube.com, Percorso: / v) 

 youtube.com/v/ youtube.com/v/&other_params

Senza schema, con sottodominio (Dominio: youtube.com, Percorso: / v) 

 www.youtube.com/v/ www.youtube.com/v/&other_params

Con schema HTTP, senza sottodominio (Dominio: youtube.com, Percorso: / v) 

 http://youtube.com/v/ http://youtube.com/v/&other_params

Con schema HTTP e sottodominio (Dominio: youtube.com, Percorso: / v) 

 http://www.youtube.com/v/ http://www.youtube.com/v/&other_params

Con schema HTTPS, senza sottodominio (Dominio: youtube.com, Percorso: / v) 

 https://youtube.com/v/ https://youtube.com/v/&other_params

Con schema HTTPS e sottodominio (Dominio: youtube.com, Percorso: / v) 

 https://www.youtube.com/v/ https://www.youtube.com/v/&other_params

Senza schema e sottodominio (Dominio: youtube.com, Percorso: / guarda) 

 youtube.com/watch?v= youtube.com/watch?v=&other_params youtube.com/watch?other_params&v= youtube.com/watch?other_params&v=&more_params

Senza schema, con sottodominio (Dominio: youtube.com, Percorso: / guarda) 

 www.youtube.com/watch?v= www.youtube.com/watch?v=&other_params www.youtube.com/watch?other_params&v= www.youtube.com/watch?other_params&v=&more_params

Con schema HTTP, senza sottodominio (Dominio: youtube.com, Percorso: / guarda) 

 http://youtube.com/watch?v= http://youtube.com/watch?v=&other_params http://youtube.com/watch?other_params&v= http://youtube.com/watch?other_params&v=&more_params

Con schema HTTP e sottodominio (Dominio: youtube.com, Percorso: / guarda) 

 http://www.youtube.com/watch?v= http://www.youtube.com/watch?v=&other_params http://www.youtube.com/watch?other_params&v= http://www.youtube.com/watch?other_params&v=&more_params

Con schema HTTPS, senza sottodominio (Dominio: youtube.com, Percorso: / guarda) 

 https://youtube.com/watch?v= https://youtube.com/watch?v=&other_params https://youtube.com/watch?other_params&v= https://youtube.com/watch?other_params&v=&more_params

Con schema HTTPS e sottodominio (Dominio: youtube.com, Percorso: / guarda) 

 https://www.youtube.com/watch?v= https://www.youtube.com/watch?v=&other_params https://www.youtube.com/watch?other_params&v= https://www.youtube.com/watch?other_params&v=&more_params

UTILIZZO FUNZIONALE

Il modo più semplice per usare il pattern è quello di avvolgerlo in una funzione come questa: 

 /** * JavaScript function to match (and return) the video Id * of any valid Youtube Url, given as input string. * @author: Stephan Schmitz  * @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);

Non è ansible abbinare la parte id con \ w +, in quanto non include il carattere trattino (-). [a-zA-Z0-9 _-] + sarebbe qualcosa di più corretto.

@eyecatchup ubove ha una regex eccellente, ma con l’aiuto di regexper.com ho visto che la sua espressione regolare passerà qualsiasi URL di youtube in cui il parametro? v ha un valore di qualsiasi parola o – segno ripetuto 11 volte. Ma YouTube limita in modo specifico l’ID del video a 11 caratteri, quindi una correzione per la sua regex sarebbe 

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

confrontare la visibilità della sua 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?$/

e la mia correzione 

 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

come modifica al limite di 11 caratteri che cambia in futuro, quindi la regex corrente significherebbe che qualsiasi parola o – dovrebbe essere ripetuta esattamente 11 volte, a quello che la mia correzione è 

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

Miglioramento per la grande regex di @ eyecatchUp:

  1. Aggiungi il supporto per il dominio m.youtube.com
  2. Aggiungi il supporto per il dominio youtube-nocookie.com di @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 
 function get_youtube_video_id_from_url(url){ var code = url.match(/v=([^&#]{5,})/) return (typeof code[1] == 'string') ? code[1] : false; } 
 function validYT(url) { var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/; return (url.match(p)) ? RegExp.$1 : false; }