JavaScript如何从完整路径URL中移除文件扩展名

解决方案 #

核心替换逻辑 #

你可以直接用精准匹配.mp4后缀的正则实现替换，避免复杂逻辑出错：

// 直接将末尾的.mp4替换为.jpg，仅匹配后缀位置的.mp4，不会影响路径中间的点
const posterUrl = element.replace(/\.mp4$/, '.jpg')

你之前的写法报错大概率是两个原因：

• 正则中的.没有转义，会被识别为匹配任意字符的通配符
• 替换后没有将结果赋值给新变量就直接使用

额外修复点 #

你的原有代码中<video>标签没有闭合，属性写完后缺少右尖括号>，会导致HTML渲染异常，需要一并修正。

修改后完整代码 #

function createImagesTag(data){
    var imagesdata = JSON.parse(data);
    images=imagesdata;
    var imagesTag="";
    var a=0;
    imagesdata.forEach(element => {
        // 提前处理海报路径
        const posterPath = element.replace(/\.mp4$/, '.jpg');
        if(a==0){
            // 补全video标签的闭合尖括号，替换poster路径
            imagesTag+="<video  muted preload='none' poster='"+ posterPath +"' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected("+ a +")' class='imagescards'><source src='"+ element +"#t=1.5' type='video/mp4' style='border: 3px solid red;'></video><br />"
        }
        else{
            // 补全video标签的闭合尖括号，替换poster路径
            imagesTag+="<video muted preload='none' poster='"+ posterPath +"' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected("+ a +")' class='imagescards'><source src='"+ element +"#t=1.5' type='video/mp4'></video><br />"
        }
      a++;
    });
    document.getElementById("images").innerHTML = imagesTag;
}

兼容多视频后缀的写法 #

如果后续需要支持webm、ogg等其他视频格式，可以把正则调整为：

const posterPath = element.replace(/\.(mp4|webm|ogg)$/, '.jpg');

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