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

 更新时间:2022年02月23日 14:17:52   作者:卖菜的小白  
给你一个文件名,你能获得它的扩展名吗?这篇文章主要给大家介绍了关于如何使用js获取扩展名的相关资料,文中介绍了几种实现的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、使用正则表达式

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获取扩展名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js中如何将多层嵌套的数组转换为一层数组

    js中如何将多层嵌套的数组转换为一层数组

    这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • JS数组去重的常用4种方法

    JS数组去重的常用4种方法

    这篇文章主要介绍了JS数组去重的常用4种方法,ES6的Set类数组去重,for循环嵌套for循环,indexOf去重,利用filter需要的朋友可以参考下
    2022-04-04
  • JS字符串补全方法padStart()和padEnd()

    JS字符串补全方法padStart()和padEnd()

    这篇文章主要介绍了JS字符串补全方法padStart()和padEnd(),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • ESLint详解及在WebStorm中的应用步骤

    ESLint详解及在WebStorm中的应用步骤

    ESLint是一种JavaScript代码检查工具,开发者可以通过自定义规则进行代码风格和质量的控制,使用ESLint的过程包括安装、初始化配置、配置规则、运行ESLint检查代码、与编辑器集成,以及与构建工具集成等,需要的朋友可以参考下
    2024-09-09
  • javascript与CSS复习(《精通javascript》)

    javascript与CSS复习(《精通javascript》)

    js和css结合来产生醒目的交互效果,我们可以快速的访问元素自身的样式属性
    2010-06-06
  • 在JavaScript中对HTML进行反转义详解

    在JavaScript中对HTML进行反转义详解

    下面小编就为大家带来一篇在JavaScript中对HTML进行反转义详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript实现动态创建CSS样式规则方案

    JavaScript实现动态创建CSS样式规则方案

    这篇文章主要介绍了JavaScript实现动态创建CSS样式规则方案,本文包含获取样式表、创建样式表、插入规则、添加规则等内容,需要的朋友可以参考下
    2014-09-09
  • js弹出div并显示遮罩层

    js弹出div并显示遮罩层

    弹出div显示遮罩层的效果,想必大家都有见到过吧,下面有个示例,大家可以参考下
    2014-02-02
  • JS+Canvas 实现下雨下雪效果

    JS+Canvas 实现下雨下雪效果

    本文给大家介绍基于JS+Canvas 实现下雨下雪效果,效果非常逼真,适应于各大网站,需要的朋友可以参考下
    2016-05-05
  • TypeScript之调用栈的实现

    TypeScript之调用栈的实现

    这篇文章主要介绍了TypeScript之调用栈的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论