js截取图片地址后面的参数和在路径中截取文件名或后缀名

在这里插入图片描述

文章目录

  • 前言
  • 截取地址 ?后面的参数
  • 在路径中截取文件名或后缀名
  • 总结


前言

在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
动态修改图片参数:如果你有一个图片URL,并且想要动态地改变它的查询参数(比如改变图片的尺寸、质量等),你可以使用URLSearchParams来修改URL,并重新加载图片。
文件上传和下载处理:在处理文件上传或下载时,你可能需要获取文件名或文件扩展名来决定如何处理文件。例如,你可能需要根据文件类型来设置不同的处理逻辑或保存路径。
URL重定向:在处理URL重定向时,你可能需要解析URL中的查询参数来决定重定向的目标地址。
构建动态URL:在构建动态网页内容时,你可能需要根据用户的输入或其他条件来生成不同的URL。这时,你可以使用这些技巧来构建包含正确查询参数或路径的URL。
URL解析和日志记录:在分析和记录用户行为或服务器请求时,你可能需要解析URL以获取有用的信息,如查询参数、路径等。
API请求处理:当你发送HTTP请求到某个API时,可能需要添加或修改查询参数。例如,你可能需要传递一些认证信息、分页参数或其他配置选项。
在处理与URL和文件路径相关的任务时,这些技巧都是非常有用的。它们能够帮助你更加灵活地操作URL和文件资源,提升网页或应用的交互性和功能性。

截取地址 ?后面的参数

可以使用JavaScript中的字符串处理函数来截取图片地址后面的参数。

// 原始图片地址
var imageUrl = "https://example.com/image.jpg?param1=value1&param2=value2";// 获取图片地址后面的参数部分(包括"?")
var paramsPart = imageUrl.substring(imageUrl.indexOf("?") + 1);
console.log(paramsPart); // 输出结果为 "param1=value1&param2=value2"// 如果只需要获取特定参数的值,可以进行更详细的处理
function getParamValue(url, paramName) {var queryString = url.split('?')[1];if (queryString === undefined || !queryString.includes(paramName)) return null;var pairs = queryString.split('&');for (var i = 0; i < pairs.length; i++) {var pair = pairs[i].split('=');if (pair[0] == paramName) {return decodeURIComponent(pair[1]);}}
}// 调用getParamValue函数获取指定参数的值
var value1 = getParamValue(imageUrl, 'param1');
console.log(value1); // 输出结果为 "value1"var value2 = getParamValue(imageUrl, 'param2');
console.log(value2); // 输出结果为 "value2"

在路径中截取文件名或后缀名

const name = "http://localhost:8000/img/图片.jpg"// '/'所在的最后位置
last = name.lastIndexOf('/') 
// 截取文件名称和后缀
str = name.substring(last+1)                          // 输出:图片.jpg
// 截取路径字符串
url = name.substring(0,last)                          // 输出:http://localhost:8000/img
// 截取文件名
document= str.substring(0, str.lastIndexOf("."))      // 输出:图片
// 截取后缀
suffix= name.substring(name.lastIndexOf("."))         // 输出:.jpg
// 截取后缀名
suffixName = name.substring(name.lastIndexOf(".")+1)  // 输出:jpg

总结

通过使用 JavaScript 的内置方法和接口,我们可以轻松地截取图片地址后面的参数,以及从路径中提取文件名或文件后缀名。这些技巧在处理 URL 和文件路径时非常有用。
在JavaScript中,处理URL和提取相关信息是一项常见任务。我们可以使用URLSearchParams接口轻松截取图片地址后面的查询参数,通过split()和pop()方法从路径中提取文件名,以及使用split()和slice()组合来截取文件后缀名。这些技巧使我们能够方便地操作URL和文件路径,从而在处理图片和其他资源时更加高效和灵活。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/502151.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zookeeper启动报错排查

前言&#xff1a;生产linux部署的zookeeper&#xff0c;执行启动脚本后&#xff0c;还是无法使用&#xff0c;故进行重启排查 在zookeeper的bin目录下执行 ./zkServer.sh start-foreground 可实时查看启动日志排查问题 根据上面的日志可以看出&#xff0c;是zoo.cfg配置文件里…

Spring注解之参数校验

目录 一些常用的字段验证的注解 验证请求体(RequestBody) 验证请求参数(Path Variables 和 Request Parameters) 数据的校验的重要性就不用说了&#xff0c;即使在前端对数据进行校验的情况下&#xff0c;我们还是要对传入后端的数据再进行一遍校验&#xff0c;避免用户绕过…

01tire算法

01tire算法 #include<bits/stdc.h> using namespace std; #define maxn 210000 int a[maxn], ch[maxn][2], val[maxn], n, ans, tot; void insert(int x) {int now 0;for (int j 31; j > 0; j -- ){int pos ((x >> i) & 1);if (!ch[now][pos])ch[now][po…

MacBook将iPad和iPhone备份到移动硬盘

#创作灵感# 一个是ICloud不够用&#xff0c;想备份到本地&#xff1b;然而本地存储不够用&#xff0c;增加容量巨贵&#xff0c;舍不得这个钱&#xff0c;所以就想着能不能备份到移动硬盘。刚好有个移动固态&#xff0c;所以就试了一下&#xff0c;还真可以。 #正文# 说一下逻…

MySQL 外键约束 多表联查 联合查询

外键约束 外键用来让两张表的数据之间建立连接&#xff0c;从而保证数据的一致性和完整性。 有一张学生表和班级表&#xff0c;学生表通过班级表的ID引用到该班级&#xff0c;从而进行关联&#xff0c;而通过外键约束可以保证数据的一致性完整性。 如学生ID18关联到课程ID1号…

介绍几种antvX6常用的方法或配置(使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化)

前言 接本专栏的上一篇antv X6新手教程&#xff0c;补充一些新的需求实现&#xff0c;丰富巩固antv X6的使用。此篇是以上一篇为基础的&#xff0c;如有初学者可以看本专栏的上一篇。 需求1&#xff1a;将编辑好的拓扑图展示在其他页面 一般在编辑完拓扑图或者流程图之后&am…

Typora快捷键设置详细教程(内附每个步骤详细截图)

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主、前后端开发、人工智能研究生。公粽号&#xff1a;程序员洲洲。 &#x1f388; 本文专栏&#xff1a;本文…

2_SQL

文章目录 SQL数据完整性实体完整性域完整性参照完整性default&#xff08;默认值&#xff09;comment&#xff08;注释&#xff09; 多表设计一对一一对多多对多数据库三大范式第一范式&#xff1a;原子性第二范式&#xff1a;唯一性第三范式&#xff1a;数据的冗余 多表查询连…

面试经典 150 题 ---- 轮转数组

面试经典 150 题 ---- 轮转数组 轮转数组方法一&#xff1a;使用额外的数组方法二&#xff1a;数组翻转 轮转数组 方法一&#xff1a;使用额外的数组 我们可以使用额外的数组来将每个元素放至正确的位置。用 n 表示数组的长度&#xff0c;我们遍历原数组&#xff0c;将原数组…

[AutoSar]BSW_Com07 CAN报文接收流程的函数调用

目录 关键词平台说明一、背景二、顺序总览三、函数说明3.1 Com_RxIndication&#xff08;&#xff09; 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &#xff0c;芯片厂商TI 英飞凌编程语言C&#xff0c;C编译器HighTec (GCC)…

Python实现双向链表:从基础到应用

一、引言 双向链表是一种比单向链表更复杂的数据结构&#xff0c;每个节点除了包含数据和指向下一个节点的指针外&#xff0c;还包含一个指向前一个节点的指针。这种结构使得我们可以从链表的任何节点开始&#xff0c;向前或向后遍历链表。 目录 一、引言 二、节点定义 三、…

CDN原理探究

来源于百度&#xff1a; https://baike.baidu.com/item/%E5%86%85%E5%AE%B9%E5%88%86%E5%8F%91%E7%BD%91%E7%BB%9C/4034265?frge_ala 通过上图&#xff0c;我们可以了解到&#xff0c;使用了CDN缓存后的网站的访问过程变为&#xff1a; 用户向浏览器提供要访问的域名&#xff…