2

Youtube からのリンクを埋め込むために機能するこの jQuery 関数があります。

  $.fn.youtube = function(options) {
    return this.each(function() {
      var options = $.extend({width:570, height:416}, options);
      var text = $(this).html();
      var regex = /http:\/\/(www.)?youtube\.com\/watch\?v=([A-Za-z0-9._%-]*)(\&\S+)?/  
      var html = text.replace(regex, '<iframe class="youtube-player" type="text/html" width="' + options.width + '" height="' + options.height + '" src="http://www.youtube.com/embed/$2" frameborder="0"></iframe>');
      $(this).html(html);
    });
  }

ただし、これは、次のような「共有」ボタンで生成された YouTube リンクでは機能しません。

http://youtu.be/pcYCAVRpThc

上記の関数/正規表現を変更して、この Youtube リンクを受け入れるにはどうすればよいですか?

4

1 に答える 1

3

変更するのと同じくらい簡単なはずです

var regex = /http:\/\/(www.)?youtube\.com\/watch\?v=([A-Za-z0-9._%-]*)(\&\S+)?/

に

var regex = /http:\/\/(www.)?youtu(be\.com|\.be)\/(watch\?v=)?([A-Za-z0-9._%-]*)(\&\S+)?/

youtube.comvsyoutu.beと、youtube.com が/watch?v=動画の識別子の前にあるという事実以外に違いがない限り。

さらに 2 つのキャプチャ グループを追加したので、text.replace を呼び出すときにも更新" src="http://www.youtube.com/embed/$2"する必要があります。"http://www.youtube.com/embed/$4"

さらに、あなたが行っているマッチングのいくつかはおそらく不必要だと思います。私は間違っているかもしれませんが、私は信じています

var regex = /youtu(be\.com\/watch\?v=|\.be\/)([A-Za-z0-9._%-]*)/

URLがYouTubeからのものであることを確認してから、ビデオのIDをキャプチャするだけでよい場合は、同様に機能します。これにより、現在のように $2 を使用して 2 番目のキャプチャ グループを取得することもできます。

最後に、動画 ID を持つ動画と少なくとも 1 つの文字を一致させたい場合は、 に変更([A-Za-z0-9._%-]*)することを検討してください。([A-Za-z0-9._%-]+)

于 2012-04-16T07:40:16.043 に答える