jQuery Youtube URL-Validierung mit Regex

Lesezeit: 13 Minuten

jQuery Youtube URL Validierung mit
Mithun Sreedharan

Ich weiß, dass hier viele Fragen beantwortet werden https://stackoverflow.com/questions/tagged/youtube+regex, aber ich kann keine ähnliche Frage wie ich finden.

Jeder Textkörper hat den regulären JavaScript-Ausdruck zur Validierung der unten aufgeführten Zeile der YouTube-VIDEO-URL. Möchte nur wissen wo eine solche URL möglich sein kann

http://www.youtube.com/watch?v=bQVoAWSP7k4

— aktualisieren 1– — aktualisieren 2–

Dieser hat fast gut funktioniert, ist aber für die URL fehlgeschlagen 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');
}

  • Diese Regex, die Sie dort haben, ist sehr lästig. Besonders die .* Teil, der zu allem passt. Dies bedeutet, dass es auch mit der folgenden URL übereinstimmen würde: http://hackersrus.com/youtube-watch?v=a

    – Sinnvoll

    3. Juni ’10 um 9:51

  • Hoppla! geändert in var-Übereinstimmungen = $(‘#videoUrl’).val().match(/http://(?:www.)?youtube.*watch?v=([a-zA-Z0-9-_]+)/); if (passt) { alert(‘gültig’); } else { alert(‘Ungültig’); }

    – Mithun Sreedharan

    3. Juni ’10 um 10:04

  • Immer noch falsch, siehe meine Antwort für einen vollständig richtigen Weg.

    – Blickfang

    9. Mai ’12 um 10:27

1642078266 413 jQuery Youtube URL Validierung mit
Blickfang

ULTIMATIVE YOUTUBE REGEX

Rosinenpickerei

Da die Erklärung immer länger wird, setze ich das Endergebnis ganz oben. Fühlen Sie sich frei, zu kopieren + einzufügen, und machen Sie sich auf den Weg. Für eine detaillierte Erklärung lesen Sie unten _”die ganze Geschichte”_.

/**
 * 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;
}

Die ganze Geschichte

Die Regex von Amarghosh sieht auf den ersten Blick gut aus. Aber es:

  1. stimmt nicht mit Video-IDs überein, die Bindestriche (-) enthalten,
  2. validiert nicht die ID-Länge (v=aa und v=aaaaaaaaaaaaaaaaaa zurück, um gültig zu sein),
  3. und stimmt überhaupt nicht mit gesicherten URLs überein (httpS://youtube.com/watch?valid_params)

Um https, den Bindestrich, abzugleichen und die ID-Länge zu validieren, war dies mein erster Vorschlag einer modifizierten Version von Amarghoshs Regex:

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

UPDATE 1: URLs versus Strings

Nachdem ich das obige Muster gepostet hatte, wurde ich gefragt: „Was ist, wenn die URL ich mag das;
youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4“?

Bitte beachten Sie zunächst, dass dies nicht a URL überhaupt. RFC-konforme URLs muss mit dem Schema beginnen! 😉

Wie auch immer, passend zu jeder Art von Schnur die auf ein YouTube-Video verweist, habe ich meine Antwort aktualisiert, um das erforderliche URL-Schema auszuschließen. Also mein zweiter Vorschlag war folgender:

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

UPDATE 2: Die ultimative Regex

Dann wurde ich gebeten, Unterstützung für einen “Sonderfall” hinzuzufügen; das Youtube kurze URLs. Anfangs habe ich diese nicht hinzugefügt, da es nicht speziell Teil der Frage war. Allerdings habe ich meine Antwort jetzt mit aktualisiert alle möglich “Sonderfälle”. Das bedeutet, dass ich nicht nur die Unterstützung für youtu.be-Links hinzugefügt habe, sondern auch die Anforderungspfade “/v” und “/embed”.

Darf ich vorstellen: Meine letzte und ultimative Youtube-Regex:

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

Welche Zeichenfolgen werden abgeglichen?

Jetzt funktioniert dieses Muster für alle Zeichenfolgen, die wie folgt formatiert sind:

Ohne Schema und Subdomain (Domain: youtu.be, Pfad: /)

youtu.be/<video:id>

Ohne Schema, mit Subdomain (Domain: youtu.be, Pfad: /)

www.youtu.be/<video:id>

Mit HTTP-Schema, ohne Subdomain (Domain: youtu.be, Pfad: /)

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

Mit HTTP-Schema und Subdomain (Domain: youtu.be, Pfad: /)

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

Mit HTTPS-Schema, ohne Subdomain (Domain: youtu.be, Pfad: /)

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

Mit HTTPS-Schema und Subdomain (Domain: youtu.be, Pfad: /)

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

Ohne Schema und Subdomain (Domain: youtube.com, Pfad: /embed)

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

Ohne Schema, mit Subdomain (Domain: youtube.com, Pfad: /embed)

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

Mit HTTP-Schema, ohne Subdomain (Domain: youtube.com, Pfad: /embed)

http://youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Mit HTTP-Schema und Subdomain (Domain: youtube.com, Pfad: /embed)

http://www.youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Mit HTTPS-Schema, ohne Subdomain (Domain: youtube.com, Pfad: /embed)

https://youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Mit HTTPS-Schema und Subdomain (Domain: youtube.com, Pfad: /embed)

https://www.youtube.com/embed/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Ohne Schema und Subdomain (Domain: youtube.com, Pfad: /v)

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

Ohne Schema, mit Subdomain (Domain: youtube.com, Pfad: /v)

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

Mit HTTP-Schema, ohne Subdomain (Domain: youtube.com, Pfad: /v)

http://youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Mit HTTP-Schema und Subdomain (Domain: youtube.com, Pfad: /v)

http://www.youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Mit HTTPS-Schema, ohne Subdomain (Domain: youtube.com, Pfad: /v)

https://youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Mit HTTPS-Schema und Subdomain (Domain: youtube.com, Pfad: /v)

https://www.youtube.com/v/<video:id>   
https://youtube.com/watch?v=%26lt%3Bvideo%3Aid%26gt%3B%26other_params

Ohne Schema und Subdomain (Domain: youtube.com, Pfad: /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

Ohne Schema, mit Subdomain (Domain: youtube.com, Pfad: /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

Mit HTTP-Schema, ohne Subdomain (Domain: youtube.com, Pfad: /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

Mit HTTP-Schema und Subdomain (Domain: youtube.com, Pfad: /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

Mit HTTPS-Schema, ohne Subdomain (Domain: youtube.com, Pfad: /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

Mit HTTPS-Schema und Subdomain (Domain: youtube.com, Pfad: /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

FUNKTIONELLE VERWENDUNG

Der einfachste Weg, das Muster zu verwenden, besteht darin, es in eine Funktion wie diese zu packen:

/**
 * 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 + "rnResult: " + (!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">

Wenn der Ergebniswert der Funktion ein boolescher Wert sein muss, ersetzen Sie einfach RegExp.$1 durch true. Das ist es.

Eine letzte Anmerkung zur Länge der Video-ID: Es wurde gefragt, ob die IDs eine feste Länge von 11 Zeichen haben? und wenn es sich in Zukunft ändern könnte?

Die beste Antwort auf diese Frage ist wahrscheinlich auch die einzige “offizielle” Aussage, die ich gefunden habe Hier und die sagt: “Ich sehe nirgendwo in der Dokumentation, wo wir uns offiziell zu einer Standardlänge von 11 Zeichen für YouTube-Video-IDs verpflichten. Es ist eines dieser Dinge, bei denen wir eine aktuelle Implementierung haben, und das kann auf unbestimmte Zeit so bleiben. Aber wir sind keine offizielle Verpflichtung dazu geben, also auf eigene Gefahr vorgehen.”

  • youtube.com-Teil in Ihrem Regexp kann mit allem wie youtubeXcom übereinstimmen, Sie sollten diesem Zeitraum entgehen

    – Yasin Ergul

    29. Apr. ’12 um 7:53

  • Was ist, wenn die URL so ist; youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4

    – FizzBuzz

    7. Mai ’12 um 3:23

  • @FizzBuzz Nun, das ist überhaupt keine gültige URL (obwohl (die meisten) Webbrowser diese Eingabe akzeptieren)! RFC-konforme URLs muss bieten ein Mittel zum Auffinden der Ressource durch Beschreibung ihres primären Zugriffsmechanismus was auf die gültige URI-Syntax verweist, die immer mit dem Zugriffsschema beginnt. Sie können das Schema jedoch in der Regex wie folgt optional machen: var pattern = /^(?:https?://)?(?:www.)?youtube.com/watch?(?=.*v=((w|-){11}))(?:S+)?$/; Beantwortet das deine Frage?

    – Blickfang

    9. Mai ’12 um 9:31

  • Wie wäre es mit youtu.be/_d6KuiuteIA Welche erhalten Sie, wenn Sie die Einbettungsoption auswählen?

    – Dan Diplom

    22. Mai ’12 um 15:52

  • Es gibt folgende Warnung “verschachtelter Wiederholungsoperator ‘+’ und ‘?’ wurde im regulären Ausdruck durch ‘*’ ersetzt”

    – Lichtschwert

    28. Apr. ’15 um 5:39

jQuery Youtube URL Validierung mit
Amarghosh

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

  • Großartig, aber gescheitert youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4

    – Mithun Sreedharan

    3. Juni ’10 um 9:57

  • youtube.com-Teil in Ihrem Regexp kann mit allem wie youtubeXcom übereinstimmen, Sie sollten diesem Zeitraum entgehen

    – Yasin Ergul

    29. Apr. ’12 um 7:53

  • Eine verbesserte Version finden Sie in meiner Antwort (stackoverflow.com/a/10315969/624466).

    – Blickfang

    1. Mai ’12 um 14:36

  • @Amarghosh, können Sie bitte höflichst sagen, welche von 2 URLs richtig sind? Ist es sehr schwierig, eine Erklärung zu geben?

    – Pratik

    12. September ’14 um 5:30

Sie können den ID-Teil nicht mit w+ abgleichen, da er den Bindestrich (-) nicht enthält. [a-zA-Z0-9_-]+ wäre etwas richtiger.

  • Sie können die ID-Länge nicht mit + validieren, {11} wäre etwas richtiger. 😉

    – Blickfang

    25. Apr. ’12 um 12:50

  • Vergessen zu erwähnen, dass (w|-) kürzer ist als [a-zA-Z0-9_-]. 😛 😉

    – Blickfang

    25. Apr. ’12 um 13:24

  • ist die ID auf 11 Zeichen festgelegt? könnte sich das in Zukunft ändern?

    – Yasin Ergul

    29. Apr. ’12 um 7:39

  • Die beste Antwort auf diese Frage ist wahrscheinlich auch die einzige “offizielle” Aussage, die ich hier gefunden habe groups.google.com/group/youtube-api-gdata/browse_thread/thread/… und die besagt: “Ich sehe nirgendwo in der Dokumentation, wo wir uns offiziell zu einer Standardlänge von 11 Zeichen für YouTube-Video-IDs verpflichten. Es ist eines dieser Dinge, bei denen wir eine aktuelle Implementierung haben, und das kann auf unbestimmte Zeit so bleiben. Aber Wir bieten dazu keine offizielle Verpflichtung an, also gehen Sie auf eigenes Risiko vor.”

    – Blickfang

    1. Mai ’12 um 14:30

1642078266 939 jQuery Youtube URL Validierung mit
Blagoj Atanasovski

@eyecatchup ubove hat eine ausgezeichnete Regex, aber mit Hilfe von regexper.com habe ich gesehen, dass seine Regex jede YouTube-URL weitergibt, bei der der Parameter ?v einen Wert eines Wortes oder Zeichens hat, das 11 Mal wiederholt wird. Aber YouTube beschränkt die Video-ID speziell auf 11 Zeichen, so dass eine Korrektur für seine Regex wäre

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

vergleiche die Visualisierung seiner 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?$/

und mein Fix

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

als Änderung der 11-Zeichen-Grenze, die sich in Zukunft ändert, würde die aktuelle Regex bedeuten, dass jedes Wort oder – genau 11-mal wiederholt werden müsste, dazu ist mein Fix 

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

Verbesserung für die großartige Regex von @eyecatchUp:

  1. Unterstützung für die Domain m.youtube.com hinzufügen
  2. Unterstützung für youtube-nocookie.com-Domain von @Nijikokun hinzufügen
^(?: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

1642078266 375 jQuery Youtube URL Validierung mit
Someshver Thakur

 /* test youtube */
 var src = "https://www.youtube.com/watch?v=HCPLKrRguDM";
  regExTestYT(src);
   function regExTestYT(str){
   var exp = new RegExp(/(youtu.be|youtube.com)/);
   return exp.test(str); 
  }

1642078266 694 jQuery Youtube URL Validierung mit
HiTech

function get_youtube_video_id_from_url(url){
    var code = url.match(/v=([^&#]{5,})/)
    return (typeof code[1] == 'string') ? code[1] : false;
}

  • Überhaupt falsch. Das passt sogar var url = 'v=abcde';. Wenn keine Übereinstimmung gefunden wird, erzeugen Sie außerdem a TypeError: Cannot read property '1' of null.

    – Blickfang

    7. Mai ’14 um 5:38

.

486380cookie-checkjQuery Youtube URL-Validierung mit Regex

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy