2

我有这个 jQuery 函数，它可以嵌入来自 Youtube 的链接：

  $.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=在视频标识符之前有任何差异之外，还有其他任何区别。

由于我添加了另外两个捕获组，因此您还必须在调用 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 来获取第二个捕获组。

最后，您可能会考虑更改([A-Za-z0-9._%-]*)为，([A-Za-z0-9._%-]+)因为您只想匹配视频 id 至少包含一个字符的视频。

于 2012-04-16T07:40:16.043 回答