JavaScript:解析params动态路径的传参

最新推荐文章于 2024-05-27 09:27:53 发布

大前端工程师

最新推荐文章于 2024-05-27 09:27:53 发布

阅读量1.2k

点赞数

文章标签： javascript 前端开发语言

程麒阁-大连大学-软件工程学院

本文链接：https://blog.csdn.net/chengqige/article/details/126773966

版权

场景浮现

假如用户传入一个路径：/demo/list/aa/12
它对应的params模板是：/demo/list/:name/:age
我们需要解构出来的数据：

{ name: 'aa', age: 12 }

那么你知道这个算法怎么实现嘛？

算法实现

function getParams(path, temp) {
    const _path = path.replace(/\?.*|\#.*/, "")
    const pathArr = _path.split('/') || [];
    const tempArr = temp.split('/') || [];
    const params = {};
    const validator = new RegExp(temp.replace(/:[0-9a-zA-Z]+/g, '.*'));
    if (!validator.test(_path)) {
        return null;
    }
    tempArr.forEach((subPath, index) => {
        if (subPath.includes(":")) {
            params[subPath.replace(":", "")] = !isNaN(Number(pathArr[index])) ? Number(pathArr[index]) : pathArr[index];
        }
    });
    return params;
}

console.log(getParams("/demo/list/aa/12", "/demo/list/:name/:age"));
console.log(getParams("/demo/list/aa/12/namespace/list/aa/ss", "/demo/list/:name/:age"));
console.log(getParams("/demo/list/aa/12?name=12", "/demo/list/:name/:age"));
console.log(getParams("/demo/list/aa/12/#/name/list", "/demo/list/:name/:age"));
console.log(getParams("/demo/list8/aa/12", "/demo/list/:name/:age"));