Question

我有这个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链接？

Answer 1

应该像更改

一样简单

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.com与youtu.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._%-]*)/

考虑到您要做的就是确认该网址来自youtube，然后捕获视频的ID，同样可以正常工作。这也可以让你用$ 2来抓住你现在的第二个捕获组。

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

自动嵌入Youtube的jQuery函数需要接受多种链接格式

1 个答案: