JS URL的相关处理

fengyehongWorld

已于 2022-02-24 19:42:59 修改

阅读量428

点赞数

分类专栏： # JS 文章标签： javascript

于 2021-08-31 14:40:16 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/120017513

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL相关</title>
</head>
<body>
    
</body>
<script>
    // ⭕构造查询参数
    const parseParams = new URLSearchParams();
    parseParams.append("name", "贾飞天");
    parseParams.append("age", 48);
    parseParams.append("email", "1358616130+128@qq.com");
    parseParams.append("name", "test");
    const queryUrl = parseParams.toString();
    console.warn(`查询参数为${queryUrl}`);  // name=%E8%B4%BE%E9%A3%9E%E5%A4%A9&age=48&email=1358616130%2B128%40qq.com&name=test

    // ⭕转换查询参数为对象
    const getUrlParamsToObject = (query) => Array.from(new URLSearchParams(query)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v}), {});
    console.dir(getUrlParamsToObject(queryUrl));
    /*
        age: "48",
        email: "1355930+128@qq.com",
        name: ["贾飞天", "test"]
    */

    // ⭕对URL进行编码,由于encodeURIComponent()方法不会对-_.!~*'()进行编码,因此我们使用.replace()方法手动编码
    const encode = url => encodeURIComponent(url)
                            .replace(/!/g, '%21')
                            .replace(/~/g, '%7E')
                            .replace(/\*/g, '%2A')
                            .replace(/'/g, '%27')
                            .replace(/\(/g, '%28')
                            .replace(/\)/g, '%29')
                            .replace(/+/g, '%20');
    
    // ⭕从URL中获取参数名所对应的桉树值
    const getParamFromUrl = (url, param) => new URLSearchParams(new URL(url).search).get(param);
    const url = "https://www.test.com?name=%E8%B4%BE%E9%A3%9E%E5%A4%A9&age=48&email=1355930%2B128%40qq.com&name=test";
    /*
        因为我们使用的是.getAll(),所以当一个key对应多个value的时候,只会查询第一个
        如果有一个key对应多个value的的情况的话,需要把get(param)给改为getAll(param)
    */ 
    console.log(getParamFromUrl(url, "age"));  // 贾飞天
</script>
</html>