Javascript match（）正则表达式检测URL并链接到嵌入的内容

Question

我正在创建一个小插件，它将超链接的href值带到YouTube，Vimeo，DailyMotion和KickStarter上的页面，然后将其转换为嵌入式URL，以显示在灯箱内的iframe中。

当然，我在这里的原因是我在使其正常工作时遇到了一些麻烦！这些是它可以接受的可能链接：

http://www.youtube.com/watch?v=[token]
http://www.youtu.be/[token]
http://www.vimeo.com/[token]
http://www.dailymotion.com/video/[token]
http://www.kickstarter.com/projects/[token]/[token]

这些是用于iframe的嵌入式链接：

http://www.youtube.com/v/[token]
http://player.vimeo.com/video/[token]
https://www.dailymotion.com/embed/video/[token]
https://www.kickstarter.com/projects/[token]/[token]/widget/video.html

这是我到目前为止的代码

if (videoURL = href.match(/(youtube|youtu|vimeo|dailymotion|kickstarter)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+)|video|projects)\/([\w-]+)\/([\w-]+)/)) {

    var src = '';

    if (videoURL[1] == 'youtube')
        src = 'http://www.youtube.com/v/' + videoURL[4];

    if (videoURL[1] == 'youtu')
        src = 'http://www.youtube.com/v/' + videoURL[3];

    if (videoURL[1] == 'vimeo')
        src = 'http://player.vimeo.com/video/' + videoURL[3];

    if (videoURL[1] == 'dailymotion')
        src = 'https://www.dailymotion.com/embed/video/' + videoURL[6];

    if (videoURL[1] == 'kickstarter')
        src = 'https://www.kickstarter.com/projects/' + videoURL[6] + '/' + videoURL[7] + '/widget/video.html';

    if (src) {
        var iframe = $('<iframe>', {
            src: src,
            frameborder: 0,
            vspace: 0,
            hspace: 0,
            scrolling: 'no',
            allowfullscreen: ''
        });

        $container.append(iframe);
    }

    iframe.load(function() {
        $loader.remove();
    });
} else {
    $this.liteboxError();
    $loader.remove();
}

但是目前只有KickStarter视频正在运行，其余视频只返回liteboxError。但是，如果我删除正则表达式的KickStarter部分，就像这样：

videoURL = href.match(/(youtube|youtu|vimeo|dailymotion)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+)|video|)\/([\w-]+)/)

然后只有DailyMotion视频正常工作，如果我删除DailyMotion正则表达式，请再次使用，如下所示：

videoURL = href.match(/(youtube|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)

然后YouTube和Vimeo视频工作正常。

只是希望有人可以对我正在使用的正则表达式的错误有所了解吗？

Answer 1

由于网址具有完全不同类型的嵌套，可以将令牌提供给实际视频，我认为您需要将它们嵌套在另一个中：

(youtu\.be|((youtube|vimeo|dailymotion|kickstarter)\.com))/(watch\?v=([-\w]+)|video/([-\w]+)|projects/([-\w]+)|([-\w]+))

  

您可以查看和测试某些案例here

Answer 2

在hjpotter92的帮助下，我设法让这段代码适用于我的正则表达式：

if (videoURL = href.match(/(youtube|youtu|vimeo|dailymotion|kickstarter)\.(com|be)\/((watch\?v=([-\w]+))|(video\/([-\w]+))|(projects\/([-\w]+)\/([-\w]+))|([-\w]+))/)) { }

然后在使用videoURL[*]将数据插入src变量时，显然会相应地更改组号！