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

Question

我正在尝试使用 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;

}

Answer 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;

}

Answer 2

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

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

Answer 3

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

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

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

Remove file extension from full path url Javascript

html

javascript

html5-video