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¶m2=value2";
 
// 获取图片地址后面的参数部分（包括"?"）
var paramsPart = imageUrl.substring(imageUrl.indexOf("?") + 1);
console.log(paramsPart); // 输出结果为 "param1=value1¶m2=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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结

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

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