URL API

URL 参数解析与对象序列化

一个有查询字段的 URL，如何将 URL 的查询字段转成一个对象？

const url = 'https://www.example.com/info.json?name=王小明&age=18&sex=male';

console.log(parseURL(url)); // {name: "王小明",age: 18,sex: male}

或者给你一个对象，将这个对象序列化成查询字段？

const object = {
    name: "王小明",
    age: 18,
    sex: "male"
};

console.log(stringifyURL(object));  // "name=王小明&age=18&sex=male"

序列化对象：

function stringifyURL(object){
    var str = "";
    for(let p in object){
        str = str + p + "=" + object[p] + "&";
    }
    return str.replace(/&$/,"");
}

解析 URL，可以使用现成的 URL 类，对输入的 URL进行操作。

function parseURL(url){
    url = new URL(url);
    var res = {},
        // 把查询参数的第一字符是问号，应该去除
        search = decodeURIComponent(url.search.replace("?",""));
        arr = search.split("&");
    arr.forEach(item => {
        var a = item.split("=");
        res[a[0]] = a[1];
    });
    return res;
}

URL 类的实例中也有一个 searchParams 属性，这个属性返回一个 Set 对象。里面存储着查询字符串的信息。

var url = new URL("https://www.example.com/info.json?name=王小明&age=18&sex=male");
console.log(url.searchParams.get("name"));      // 王小明

需要注意的是，URL 类不兼容 IE 浏览器。因此该方法并不推荐使用。 可以利用正则表达式写一个兼容的解析函数。

function parseURL(url){
    // 匹配 URL 查询字段的字符串
    var reg = /\?((.+)\=(.*)&?)/g;
        query = url.match(reg);
    if(query){
        // 将第一个问号去掉
        query = decodeURIComponent(query[0].replace("?",""));
        var arr = query.split("&"),
            res = {};
        arr.forEach(item => {
            var a = item.split("=");
            res[a[0]] = a[1];
        });
        return res;
    }
    return null;
}

在 Node.js 中已经实现了 url 的解析与序列化。

const url = require("url");
const qs = require("querystring");

// url 解析：
console.log(
    qs.parse(
    url.parse(
        "https://www.example.com/info.json?name=%E7%8E%8B%E5%B0%8F%E6%98%8E&age=18&sex=male").query
    )
);

// 对象序列化：
const obj = {
    name: "王小明",
    age: 18,
    sex: "male",
};

console.log(qs.stringify(obj));     // name=%E7%8E%8B%E5%B0%8F%E6%98%8E&age=18&sex=male