从完整路径 url Javascript 中删除文件扩展名答案

【问题标题】：Remove file extension from full path url Javascript从完整路径 url Javascript 中删除文件扩展名
【发布时间】：2021-11-20 17:34:20
【问题描述】：

我正在尝试使用 Javascript 从一些视频 URL 设置 HTML 海报图像，我可以使用 "+ element +" 获取文件的完整路径，但我无法在最后删除扩展名。我尝试了几种方法，但它们都会产生错误。

"+ element +" 会生成这个结果img/holidays/4ofjuly2.mp4

我需要删除poster="img/holidays/4ofjuly2.mp4" .mp4 以添加.jpg

我试过 .replace(/.[^/.]+$/, "")

和.split('.').slice(0, -1).join('.')

function createImagesTag(data){
    var imagesdata = JSON.parse(data);
    images=imagesdata;
    var imagesTag="";
    var a=0;
    imagesdata.forEach(element => {
        if(a==0){
            imagesTag+="<video  muted preload='none' poster='"+ element +"' 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{
            imagesTag+="<video muted preload='none' poster='"+ element +"' 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;

}

【问题讨论】：

"我尝试了几种方法..." - 比如什么？向我们展示您的尝试并解释它如何不起作用。试试这些：substring、split、RegExp

标签： javascript html html5-video

【解决方案1】：

您可能正在寻找substring。检查下面的代码，如果你想了解更多关于reduce,check this link from MDN的信息。

function createImagesTag(data){
    const images = JSON.parse(data);
    const imageList = images.reduce((acc, el, index) => {
    const srcWithoutSuffix = el.substring(0, el.length - 4);
      if(index === 0) {
          acc+=`<video  muted preload='none' poster='${srcWithoutSuffix}'' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected(0)' class='imagescards' <source src='${el}'#t=1.5'type='video/mp4' style='border: 3px solid red;'></video><br />`;
          return acc;
      }
       
      acc+=`<video muted preload='none' poster='${srcWithoutSuffix}' width='80%' height='40%' id='images_"+a+"' onclick='changeSelected(${index})' class='imagescards' <source src='${el}'#t=1.5' type='video/mp4'></video><br />`
      return acc;
    }, '');

    const imagesHTML = imageList.substr(0, imageList.length - 4);
    document.getElementById("images").innerHTML = imagesHTML;

}

【讨论】：

通过全局使用子字符串我会危及 src='${el}' 我需要找到一种方法来替换只是 poster=""
@robotron 编辑了我的评论，这应该可以解决您的问题
Itay Elgazar 你是男人！

【解决方案2】：

我认为问题出在<video> 标签的语法上，请检查格式。

<video>
      <source src="">
</video>

【讨论】：

【解决方案3】：

JS 函数替换非常适合这个用例。

const poster = "img/holidays/4ofjuly2.mp4";
const result = poster.replace(/mp4/g, "jpg");
console.log(result)

【讨论】：