广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用js获取扩展名详解
  • 206
分享到

如何使用js获取扩展名详解

2024-04-02 19:04:59 206人浏览 泡泡鱼
摘要

目录一、使用正则表达式二、使用String中的split方法三、使用String的lastIndexOf方法四、附获取文件扩展名的另两种方法总结一、使用正则表达式 function

一、使用正则表达式

function getFileExtension1(filename) {
  return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)[0] : undefined
}

这里的/[.]/.exec(filename)是用来判断.是否存在,如果不存在的话,其值为null,/[^.]+$/.exec(filename)[0]拿到从.开始匹配的字符串,也就是扩展名。如果不存在则返回undefined。

二、使用String中的split方法

function getFileExtension(filename) {
  return filename.split(".").pop()
}

三、使用String的lastIndexOf方法

function getFileExtension(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2)
}

解释:首先filename.slice()方法是用来切割字符串的,所以我们只需要获取的.的下一位坐标即可,此时我们可以使用filename.lastIndexOf()来获取最后一位.所在的下标。

我们需要考虑多种情况,

一种:如果filename.lastIndexOf()大于0,此时我们直接获取下一位的坐标即可,以下一位为起始进行切割。

二种:如果filename.lastIndexOf为-1,则表示不存在.,此时我们应该将其设置为一个很大的数,当从一个大于字符串长度进行切割时,返回的字符串为空字符串。

三种:如果filename.lastIndexOf为0时,则也表示不存在扩展名,此时我们应该将其设置为很大的数。

filename.lastIndex(".") - 1中这里的减一,就是将0变为-1, -1变成-2。

>>> 0的解释:

console.log(12 >>> 0)    //12
console.log(1.2 >>> 0)   //1
console.log(1.8 >>> 0)   //1
console.log(-1 >>> 0)    //4294967295
console.log(-2 >>> 0)    //4294967294
console.log(0 >>> 0)     //0
如上述代码和其结果所示。
如果值为正整数时,此时结果还为原来的值
如果值为小数时,此时结果为小数向下取整所得的值。
如果值为负数时,此时结果为当前值 + 二的32次方所得的值。
如果值为0时,此时结果为0。

四、附获取文件扩展名的另两种方法

  • substring,lastIndexOf联合使用
  • split,pop联合使用

下面贴上代码:

//获取文件后缀的js代码
<script type="text/javascript">
        var strp;
    function getEx(){
        var filepath=document.getElementById('fileEx').value;
        var opt=parseInt(document.getElementById('opt').value);
        switch(opt){
            case 1:
                strp=filepath.substring(filepath.lastIndexOf(".")+1);
                break;
            case 2:
                strp=filepath.split(".").pop();
                break;
                        }
        alert(strp);
    }
    </script>
 
//html页面
<input type="file" id="fileEx" name="fileEx">
<select id="opt">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<button onClick="getEx()">获取</button>

简要来说就是获取文件路径,然后使用不同的方法获取后缀名

总结

到此这篇关于如何使用js获取扩展名的文章就介绍到这了,更多相关js获取扩展名内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何使用js获取扩展名详解

本文链接: https://www.lsjlt.com/news/140212.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用js获取扩展名详解
    目录一、使用正则表达式二、使用String中的split方法三、使用String的lastIndexOf方法四、附获取文件扩展名的另两种方法总结一、使用正则表达式 function...
    99+
    2022-11-13
  • php如何获取url扩展名
    这篇文章主要介绍了php如何获取url扩展名,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。获取方法:1、用“substr(strrchr($url,".&...
    99+
    2023-06-29
  • php如何获取文件扩展名
    在PHP中,可以使用pathinfo()函数来获取文件的扩展名。pathinfo()函数可以返回一个包含有关文件路径的信息的关联数组...
    99+
    2023-10-08
    php
  • shell如何获取文件名或者扩展名
    这篇文章主要为大家展示了“shell如何获取文件名或者扩展名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“shell如何获取文件名或者扩展名”这篇文章吧。获取文...
    99+
    2022-10-19
  • GO语言API开发:如何获取文件路径中的文件名和扩展名?
    在开发GO语言应用程序时,有时需要获取文件路径中的文件名和扩展名。这种需求在文件上传、文件下载等场景下非常常见。本文将介绍在GO语言中如何获取文件路径中的文件名和扩展名。 获取文件名 在GO语言中,获取文件路径中的文件名可以通过path包...
    99+
    2023-11-13
    api 文件 path
  • JS前端可扩展的低代码UI框架Sunmao使用详解
    目录引言设计原则1. 明确不同角色的职责2. 发挥代码的威力,而不是限制3. 各个层面的可扩展性4. 专注而不是发散Sunmao 的工作原理响应最新的状态组件间交互布局与样式类型安全...
    99+
    2022-11-13
  • python使用标准库根据进程名如何获取进程的pid详解
    前言 标准库是Python的一个组成部分。这些标准库是Python为你准备好的利器,可以让编程事半功倍。特别是有时候需要获取进程的pid,但又无法使用第三方库的时候。下面话不多说了,来一起看看详细的介绍吧。...
    99+
    2022-06-04
    进程 详解 标准
  • 如何使用Bash Shell获取文件名和目录名
    这篇文章主要讲解了“如何使用Bash Shell获取文件名和目录名”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用Bash Shell获取文件名和目录名”吧!前言还是今天再写一个自动化...
    99+
    2023-06-09
  • 如何使用原生JS获取URL链接参数
    这篇文章将为大家详细讲解有关如何使用原生JS获取URL链接参数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 获取方式总结利用原生JS获取URL链接参数的方法也有好几种,今天我们依次来讲解常见的几种:...
    99+
    2023-06-29
  • js如何在解构中使用别名
    这篇文章给大家分享的是有关js如何在解构中使用别名的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在解构中使用别名解构赋值是一个JavaScript表达式,它可以将数组中的值或对象中的属性解构缩不同的变量中。不必使...
    99+
    2023-06-27
  • html中如何使用js来获取本地系统时间
    小编给大家分享一下html中如何使用js来获取本地系统时间,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!<div id="名称"> <scr...
    99+
    2022-10-19
  • 详解如何使用Python网络爬虫获取招聘信息
    目录前言项目目标项目准备反爬措施项目实现效果展示小结前言 现在在疫情阶段,想找一份不错的工作变得更为困难,很多人会选择去网上看招聘信息。可是招聘信息有一些是错综复杂的。而且不能把全部...
    99+
    2022-11-13
  • 如何利用AJAX获取Django后端数据详解
    使用Django服务网页时,只要用户执行导致页面更改的操作,即使该更改仅影响页面的一小部分,它都会将完整的HTML模板传递给浏览器。但是如果我们只想更新页面的一部分,则不必完全重新渲...
    99+
    2022-11-12
  • 如何使用 MySQL 在 Java 中获取 ResultSet 上的列名称?
    要获得结果集中的列名,您需要使用getMetaData()方法。getMetadata()的原型如下 −ResultSetMetaData getMetaData throws SQLException;Create a MySQL tab...
    99+
    2023-10-22
  • 如何使用node.js爬取指定排名网站的JS引用库
    小编给大家分享一下如何使用node.js爬取指定排名网站的JS引用库,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!所用到的nod...
    99+
    2022-10-19
  • 如何使用JS获取当前节点的兄弟/父/子节点
    目录JS获取当前节点的方式:获取子节点:获取父节点: 获取兄弟节点总结JS获取当前节点的方式: 通过事件监听器获取当前节点: <button onclick="fun...
    99+
    2023-05-17
    js获取当前节点的父节点 js获取节点的方法 js获取兄弟节点元素
  • 在JS中如何使用css变量详解
    在JS中如何使用css变量 使用:export关键字在less/scss文件中导出一个js对象。 $menuText:#bfcbd9; $menuActiveText:#409E...
    99+
    2022-11-12
  • 如何使用uniapp开发微信小程序获取当前位置详解
    目录前言一、配置1、进入mainfest.json文件配置permission块2、进入微信公众平台添加合法域名3、高德SDK文件下载二、使用步骤 (直接封装组件)1.在组件中引入a...
    99+
    2022-11-13
    uniapp小程序定位 uniapp小程序获取用户信息 uniapp定位当前位置
  • Spring MVC如何使用@RequestParam注解获取参数
    目录使用@RequestParam注解获取参数@RequestParam无法获取参数使用@RequestParam注解获取参数 创建Hello控制器类 package com.c...
    99+
    2022-11-12
  • 如何使用原生JS获取select元素选中的value和text值
    本篇内容主要讲解“如何使用原生JS获取select元素选中的value和text值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用原生JS获取select元素选中的value和text值”...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作