web-dev-qa-db-ja.com

テキストボックスでクライアント側のYouTube URLを検証する方法

動画のチューブURLのみを許可するテキストボックスを作成する必要があります。

サーバー側で検証を処理するために、 コードの下 を使用しています

$rx = '~
    ^(?:https?://)?              # Optional protocol
     (?:www\.)?                  # Optional subdomain
     (?:youtube\.com|youtu\.be)  # Mandatory domain name
     /watch\?v=([^&]+)           # URI with video id as capture group 1
     ~x';

$has_match = preg_match($rx, $url, $matches);

クライアント側の検証のために同じソリューションを探していました。 <input type="url">here しかし、html5ブラウザ専用のようです。

すべてのブラウザと互換性があるように、テキストボックスでクライアント側の検証を行うことは可能ですか？

ありがとう

javascriptregexhtml5validationyoutube
23
Hitesh

YoutubeのURLを検証するコードは次のとおりです。

function validateYouTubeUrl()
{
    var url = $('#youTubeUrl').val();
        if (url != undefined || url != '') {
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
            var match = url.match(regExp);
            if (match && match[2].length == 11) {
                // Do anything for being valid
                // if need to change the url to embed url then use below line
                $('#ytplayerSide').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?autoplay=0');
            }
            else {
                // Do anything for not being valid
            }
        }
}

Fiddle Url：https://jsfiddle.net/cpjushnn/12/

55
Manik Arora

この作業例を参照してください。

function matchYoutubeUrl(url) {
    var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    if(url.match(p)){
        return url.match(p)[1];
    }
    return false;
}

更新されたフィドル： http://jsfiddle.net/3ouq9u3v/13/

22
Jitendra Pancholi

正規表現に含まれるすべてのスラッシュをエスケープし、変更された正規表現をスペースやコメント行なしで/区切り文字内に入れます。x修飾子を追加する必要はありません。

var re = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/watch\?v=([^&]+)/m;
2
Avinash Raj

ここからの回答といくつかの修正を組み合わせて、この正規表現を思いつきました：

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

これはどの形式にも一致しますが、IDが11文字より長い場合は不一致になります。 「？」で開始ビデオタグを追加することもできます最後の部分。

貼り付けてテストできます into this

1
ForestG