如何修改prettyPhoto正则表达式以正确生成Vimeo未列出视频嵌入链接？

问题场景 #

用prettyPhoto生成Vimeo未列出视频的嵌入链接时，因为参数顺序错误，播放器会提示视频不存在：

• Vimeo未列出视频原始链接：https://vimeo.com/12345/abcde
• 当前错误生成的链接：

https://player.vimeo.com/video/12345?title=0&byline=0&portrait=0&autoplay=1&allowFullScreen=1;h=abcde;

• 正确格式要求：哈希参数h=abcde必须紧跟在视频ID之后，示例：

https://player.vimeo.com/video/12345?h=abcde&title=0&byline=0&portrait=0&autoplay=1&allowFullScreen=1;

原代码问题 #

原正则表达式只捕获了视频ID，没处理未列出视频的哈希值，导致哈希参数被错误追加到链接末尾。

修改方案 #

调整正则表达式捕获哈希值，同时修改链接拼接逻辑，把h参数放在最前面：

case 'vimeo':
    pp_dimensions = _fitToViewport(movie_width,movie_height); // Fit item to viewport
                
    movie_id = pp_images[set_position];
    // 修正正则，同时捕获视频ID和可选的哈希值
    var regExp = /http(s?):\/\/(www\.)?vimeo.com\/(\d+)(?:\/([a-zA-Z0-9]+))?/;
    var match = movie_id.match(regExp);
    
    // 先拼接视频ID
    var movie = 'http://player.vimeo.com/video/' + match[3];
    // 处理哈希参数，放在最前面
    if (match[4]) {
        movie += '?h=' + match[4];
    } else {
        movie += '?';
    }
    // 拼接其他固定参数
    movie += "title=0&byline=0&portrait=0";
    // 处理自动播放参数
    if(settings.autoplay) {
        movie += "&autoplay=1";
    }
    
    vimeo_width = pp_dimensions['width'] + '/embed/?moog_width='+ pp_dimensions['width'];
            
    toInject = settings.iframe_markup.replace(/{width}/g,vimeo_width).replace(/{height}/g,pp_dimensions['height']).replace(/{path}/g,movie);
break;

修改说明 #

1. 正则表达式调整：
   • 新增(?:\/([a-zA-Z0-9]+))?可选组，用来匹配视频ID后的哈希值部分，哈希值会被捕获到match[4]中（非捕获组(?:...)不占用捕获组序号，只用来包裹可选的/哈希值结构）
2. 链接拼接逻辑优化：
   • 先拼接视频ID，再判断是否存在哈希值，存在则优先添加?h=哈希值，不存在则先加?确保参数格式正确
   • 后续参数统一用&连接，移除原代码中多余的分号，避免参数格式错误

内容的提问来源于stack exchange，提问作者Harlan Bowling