web-dev-qa-db-ja.com

正規表現を使用したjQuery Youtube URL検証

ここでたくさんの質問に答えていることはわかっています https://stackoverflow.com/questions/tagged/youtube+regex ですが、私のような質問は見つかりません。

以下のYouTube VIDEO URLの行を検証するための本文には、JavaScript正規表現があります。そのようなURLがどこで使用できるかを知りたいだけです。

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

-アップデート1---アップデート2--

これはほとんど問題なく動作しましたが、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

究極のYouTube正規表現

さくらんぼ狩り

説明がますます長くなっているため、最終結果を一番上に配置します。自由にコピーして貼り付けてください。詳細な説明については、以下の「完全なストーリー」を参照してください。

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

完全な物語

Amarghoshの正規表現 一見、良さそうです。しかし、それ：

  1. ダッシュ（-）を含む動画IDと一致しません。
  2. iDの長さを検証しません（_v=aa_および_v=aaaaaaaaaaaaaaaaaa_が有効に戻る）、
  3. セキュリティ保護されたURLとはまったく一致しません（https：//youtube.com/watch？valid_params）

Https、ダッシュ文字に一致し、IDの長さを検証するために、これはAmarghoshの正規表現の修正バージョンの最初の提案でした。

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

更新1：URLと文字列

上記のパターンを投稿した後、 "[〜＃〜] url [〜＃〜]はこのようなものです。
_youtube.com/watch?gl=US&hl=en-US&v=bQVoAWSP7k4_ "？

まず、これは[〜＃〜] url [〜＃〜]ではないことに注意してください。 RFC準拠のURL はスキームで開始する必要があります！ ;）

とにかく、YouTubeビデオを参照することを示すあらゆる種類のstringに一致するように、必要なURLスキームを除外するように回答を更新しました。したがって、2番目の提案は次のとおりです。

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

更新2：究極の正規表現

次に、「特別なケース」のサポートを追加するように求められました。 youtu.be短いURL。質問の一部ではなかったため、最初はこれらを追加しませんでした。ただし、all可能 "特別な場合"で回答を更新しました。これは、youtu.beリンクのサポートを追加しただけでなく、リクエストパス「/ v」と「/ embed」も追加したことを意味します。

だから、私は紹介することができます：私の最後の究極のYoutube正規表現：

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

どの文字列が一致しますか？

これで、このパターンは、次のようにフォーマットされたすべての文字列に対して機能します。

スキームとサブドメインなし（ドメイン：youtu.be、パス：/）

_youtu.be/<video:id>   
_

スキームなし、サブドメインあり（ドメイン：youtu.be、パス：/）

_www.youtu.be/<video:id>     
_

HTTPスキームあり、サブドメインなし（ドメイン：youtu.be、パス：/）

_http://youtu.be/<video:id>   
_

HTTPスキームおよびサブドメイン（ドメイン：youtu.be、パス：/）

_http://www.youtu.be/<video:id>   
_

HTTPSスキームあり、サブドメインなし（ドメイン：youtu.be、パス：/）

_https://youtu.be/<video:id>     
_

HTTPSスキームおよびサブドメイン（ドメイン：youtu.be、パス：/）

_https://www.youtu.be/<video:id>   
_

スキームとサブドメインなし（ドメイン：youtube.com、パス：/ embed）

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

スキームなし、サブドメインあり（ドメイン：youtube.com、パス：/ embed）

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

HTTPスキームあり、サブドメインなし（ドメイン：youtube.com、パス：/ embed）

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

HTTPスキームとサブドメイン（ドメイン：youtube.com、パス：/ embed）

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

HTTPSスキームあり、サブドメインなし（ドメイン：youtube.com、パス：/ embed）

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

HTTPSスキームとサブドメイン（ドメイン：youtube.com、パス：/ embed）

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

スキームとサブドメインなし（ドメイン：youtube.com、パス：/ v）

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

スキームなし、サブドメインあり（ドメイン：youtube.com、パス：/ v）

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

HTTPスキームあり、サブドメインなし（ドメイン：youtube.com、パス：/ v）

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

HTTPスキームとサブドメイン（ドメイン：youtube.com、パス：/ v）

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

HTTPSスキームあり、サブドメインなし（ドメイン：youtube.com、パス：/ v）

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

HTTPSスキームおよびサブドメイン（ドメイン：youtube.com、パス：/ v）

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

スキームとサブドメインなし（ドメイン：youtube.com、パス：/ 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  
_

スキームなし、サブドメインあり（ドメイン：youtube.com、パス：/ 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   
_

HTTPスキームあり、サブドメインなし（ドメイン：youtube.com、パス：/ 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  
_

HTTPスキームとサブドメイン（ドメイン：youtube.com、パス：/ 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  
_

HTTPSスキームあり、サブドメインなし（ドメイン：youtube.com、パス：/ 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     
_

HTTPSスキームとサブドメイン（ドメイン：youtube.com、パス：/ 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  
_

機能的な使い方

パターンを使用する最も簡単な方法は、次のような関数にラップすることです。

_/**
 * 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">_

関数の結果値の型がブール値でなければならない場合は、_RegExp.$1_をtrueに置き換えてください。それでおしまい。

ビデオIDの長さに関する最後のメモ：IDの固定長が11文字かどうか尋ねられましたか？そして、それが将来変更される可能性がある場合は？

その質問への最良の答えは、おそらく私が見つけた唯一の「公式」ステートメントでもあります here そして言う： "ドキュメントのどこにも見当たりませんYouTubeの動画IDに対して11文字の標準の長さを公式にコミットします。これは現在実装されているものの1つであり、無期限にそのままとどまる可能性があります。あなた自身のリスク。」

179
eyecatchUp

@eyecatchup uboveには優れた正規表現がありますが、regexper.comの助けを借りて、彼の正規表現が？vパラメータにWordまたは-記号の値が11回繰り返されているすべてのyoutube URLを渡すことがわかりました。ただし、YouTubeでは動画IDを11文字に制限しているため、正規表現の修正は次のようになります。

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

彼の正規表現の視覚化を比較する

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?$/

そして私の修正

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

将来的に変更される11文字の制限の編集として、現在の正規表現は、Wordまたは-を正確に11回繰り返す必要があることを意味します。

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

@eyecatchUpの素晴らしい正規表現の改善：

  1. M.youtube.comドメインのサポートを追加します
  2. @Nijikokunによるyoutube-nocookie.comドメインのサポートを追加
^(?:https?:\/\/)?(?:(?:www|m)\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$

正規表現：

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