返回顶部
首页 > 资讯 > 前端开发 > html >JavaScript怎么实现点击删除扩展名并获取文件名
  • 269
分享到

JavaScript怎么实现点击删除扩展名并获取文件名

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

这篇文章主要为大家展示了“javascript怎么实现点击删除扩展名并获取文件名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript怎么实现点击删

这篇文章主要为大家展示了“javascript怎么实现点击删除扩展名并获取文件名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript怎么实现点击删除扩展名并获取文件名”这篇文章吧。

第一种方法代码如下:

注:本示例使用split()slice() join() 方法获取文件名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style = "text-align:center;">

<h2 style = "color:#ff311f;" >
    编程网
</h2>

<p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
</p>

<button onclick = "gfg_Run()">
    点击
</button>

<p id = "GFG_DOWN" style =
        "color:#ff311f; font-size: 20px; font-weight: bold;">
</p>

<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var fName = "fileName.jpg";
    el_up.innerHTML = "String = '"+fName + "'";

    function gfg_Run() {
        el_down.innerHTML = fName.split('.').slice(0, -1).join('.');
    }
</script>
</body>
</html>
  • split()方法:用于把一个字符串分割成字符串数组

  • slice()方法:可提取字符串的某个部分,并以新的字符串返回被提取的部分。

  • join()方法:用于把数组中的所有元素放入一个字符串。

第二种方法代码如下:

注:本示例使用RegExpreplace() 方法获取文件名。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body style = "text-align:center;">

<h2 style = "color:#17c4ff;" >
    编程网
</h2>

<p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
</p>

<button onclick = "gfg_Run()">
    点击
</button>

<p id = "GFG_DOWN" style =
        "color:#17c4ff; font-size: 20px; font-weight: bold;">
</p>

<script>
    var el_up = document.getElementById("GFG_UP");
    var el_down = document.getElementById("GFG_DOWN");
    var fName = "fileName.jpg";
    el_up.innerHTML = "String = '" + fName + "'";

    function gfg_Run() {
        el_down.innerHTML =fName.replace(/\.[^/.]+$/, "")
    }
</script>
</body>
</html>
  • RegExp 是正则表达式的缩写。RegExp对象用于规定在文本中检索的内容,可通过 new 关键词来定义 RegExp 对象。

  • replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

以上是“JavaScript怎么实现点击删除扩展名并获取文件名”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: JavaScript怎么实现点击删除扩展名并获取文件名

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

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

猜你喜欢
  • JavaScript怎么实现点击删除扩展名并获取文件名
    这篇文章主要为大家展示了“JavaScript怎么实现点击删除扩展名并获取文件名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript怎么实现点击删...
    99+
    2024-04-02
  • 怎么用Shell获取文件的文件名和扩展名
    这篇文章主要讲解了“怎么用Shell获取文件的文件名和扩展名”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Shell获取文件的文件名和扩展名”吧!basename examp...
    99+
    2023-06-09
  • php获取文件扩展名的3种方法实例
    目录前言PHP pathinfo()获取文件扩展名PHP SplFileInfo获取文件后缀PHP substr()和strrchr()函数获取文件扩展名总结前言 在php...
    99+
    2023-01-15
    PHP获取文件扩展名的代码 php获取文件扩展名实验总结 php 获取文件扩展名
  • JS怎么通过截取子串的方法获取文件扩展名
    本篇内容介绍了“JS怎么通过截取子串的方法获取文件扩展名”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!本文...
    99+
    2024-04-02
  • 怎么在linux中获取文件名称并生成列表
    本篇文章为大家展示了怎么在linux中获取文件名称并生成列表,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。如下所示:> 自己写的create_filelist.sh文件,如下trai...
    99+
    2023-06-09
  • 怎么实现将目录下文件按扩展名分类的bat代码
    小编给大家分享一下怎么实现将目录下文件按扩展名分类的bat代码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!其实就是利用强大的for命令实现实现代码:for&nb...
    99+
    2023-06-08
  • 怎么用vbs实现删除名称中有撇号的文件夹
    这篇文章主要讲解了“怎么用vbs实现删除名称中有撇号的文件夹”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用vbs实现删除名称中有撇号的文件夹”吧!撇号的问题在于它是“保留”字符,也就是...
    99+
    2023-06-08
  • Python怎么实现批量生成、重命名和删除word文件
    这篇文章主要讲解了“Python怎么实现批量生成、重命名和删除word文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Python怎么实现批量生成、重命名和删除word文件”吧!批量生成w...
    99+
    2023-07-05
  • 如何实现批处理获取文件夹下面txt文件行数并添加到文件名后
    本篇内容介绍了“如何实现批处理获取文件夹下面txt文件行数并添加到文件名后”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!方法一:@echo&...
    99+
    2023-06-08
  • 怎么用批处理实现的结束进程并删除文件
    这篇文章给大家分享的是有关怎么用批处理实现的结束进程并删除文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。代码如下:@echo off title=结束进程并删除文件[Null] echo.请输入进程名: se...
    99+
    2023-06-08
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作