Jquery根据扩展名获取文件并渲染答案

【问题标题】：Jquery get file and render depending on extensionJquery根据扩展名获取文件并渲染
【发布时间】：2021-03-19 04:36:08
【问题描述】：

我有一个指向文件、图像、视频等的链接列表。

我正在尝试创建一个 jquery 函数来遍历链接列表并呈现文件。如果文件是png就渲染成img，如果是mp4就渲染成视频。

我创建了以下 jquery，它将获取文件 src 并将其放入有效的 img 标签中。

$(a).each(function(i, a) {
   href = $(a).attr('href');
   $(a).replaceWith('<img src="' + href + '">');
});

但我需要检查扩展名并将其放入 img 标签或 video 标签中。所以我尝试了以下jquery，但它不起作用。

$(a).each(function(i, a) {
   href = $(a).attr('href');
   var extension = href.substr( (file.lastIndexOf('.') +1) );
     switch(extension) {
       case 'png':
          $(a).replaceWith('<img src="' + href + '">');
       break;                         
       case 'mp4':
          $(a).replaceWith('<video src="' + href + '">');
       break;
     }
});

如何获取文件扩展名，如果是视频类型，请将 src 放入 video 标签而不是 img 标签中？

感谢您的帮助

【问题讨论】：

标签： jquery file mime-types

【解决方案1】：

您可以使用 jquery 的 split 方法将您的 href 从 . 拆分，然后使用 extension[1] 这将给出 png,mp4..etc 然后只需在 switch 语句中进行比较并显示它们。

演示代码：

var a = $("a")
$(a).each(function(i, a) {
  href = $(this).attr('href');
  //spilt href from `.` and get 1 position value
  var extension = href.split(".")[1];
  console.log(extension)
  switch (extension) {
    case 'png':
      $(a).replaceWith('<img src="' + href + '" alt="' + href + '">');
      break;
    case 'mp4':
      $(a).replaceWith('<video width = "200" height = "200" controls><source src = "' + href + '" type = "video/mp4"></video>');
      break;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="image1.png"></a>
<a href="image2.png"></a>

<a href="video.mp4"></a>
<a href="video1.mp4"></a>
<a href="image3.png"></a>

【讨论】：