实现如下效果
const url = "https://xxxx.com?a=3&b=4&c=5&name=1+1=2"; // 解析后得到 qs 如下 const qs = { a: 3, b: 4, c: 5, name: '1+1=2' };
纯碎使用 javascript
完成解析函数,而不利用浏览器 DOM 特性 API,代码如下所示,细节在注释中体现
function parse(url) { // 一、夹杂在 ? 与 # 之前的字符就是 qs,使用 /\?([^/?#:]+)#?/ 正则来抽取 // 使用正则从 URL 中解析出 querystring // 二、通过 Optional Chain 来避免空值错误 const queryString = url.match(/\?([^/?#:]+)#?/)?.[1]; if (!queryString) { return {}; } queryObj = queryString.split("&").reduce((params, block) => { // 三、如果未赋值,则默认为空字符串 const [_k, _v = ""] = block.split("="); // 四、通过 decodeURIComponent 来转义字符,切记不可出现在最开头,以防 ?tag=test&title=1%2B1%3D2 出错 const k = decodeURIComponent(_k); const v = decodeURIComponent(_v); if (params[k] !== undefined) { // 处理 key 出现多次的情况,设置为数组 params[k] = [].concat(params[k], v); } else { params[k] = v; } return params; }, {}); return queryObj; }
更简便的方式是使用浏览器特性 API,就是下面这个
new URLSearchParams(paramsString)
我们一起来看看使用这个API,实现步骤
function parse() { let serach = window.location.search; let params = new URLSearchParams(serach), queryObj = {}; for (let [k, v] of params.entries()) { if (queryObj[k] !== undefined) { queryObj[k] = [].concat(queryObj[k], v); } else { queryObj[k] = v; } } return queryObj; }
方便一点,对吧
标签:queryObj,const,URL,querystring,params,return,解析 From: https://www.cnblogs.com/maomao93/p/17282949.html