Javascript match() 正则表达式检测 URL 并链接到嵌入内容

Question

我正在创建一个小插件，它获取指向 YouTube、Vimeo、DailyMotion 和 KickStarter 上页面的超链接的 href 值，然后将其转换为嵌入 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

由于 URL 具有完全不同类型的嵌套来为您提供实际视频的标记，我认为您需要将它们一个嵌套在另一个嵌套中:

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

可以查看和测试一些案例here