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

场景浮现

假如用户传入一个路径:/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"));

猜你喜欢

转载自blog.csdn.net/chengqige/article/details/126773966