URLSearchParams & shape URL params
URLSearchParams
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description SearchParamsGenerator
* @augments
* @example
*
* @param {String} search
* @param {Boolean} debug
*
*/
const SearchParamsGenerator = (search = ``, debug = false) => {
let result = {};
// do something...
let params = new URLSearchParams(search);
for (const param of params) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
result[key] = value;
// console.log(`param =`, param);
// param = ["gilcode", "600570.SH"];
// param = ["skin", "white"];
// param = ["name", "恒生电子"];
// param = ["type", "0"];
parseInt("恒生电子", 10);
// NaN
parseInt("0", 10);
// 0
parseInt("11", 2);
// 3
parseInt("11", 10);
// 11
}
return result;
};
let search = decodeURIComponent(window.location.search);
// "?gilcode=600570.SH&skin=white&name=恒生电子&type=0"
SearchParamsGenerator(search);
// {gilcode: "600570.SH", skin: "white", name: "恒生电子", type: "0"}
SearchParamsGenerator(search).gilcode;
// "600570.SH"
// view/stock/index.html?code=600570.SH&skin=white&name=恒生电子&type="0"
// /view/stock/index.html?code=600570.SH&skin=white&name="恒生电子"&type="0"
// decodeURIComponent(window.location.href);
// "f10/view/stock/index.html?code=600570.SH&skin=white&name=恒生电子&type=0"
// decodeURI(window.location.href);
// "/f10/view/stock/index.html?code%3D600570.SH%26skin%3Dwhite%26name%3D恒生电子%26type%3D0"
let searchParams = new URLSearchParams(search);
searchParams.has("code"); // true
searchParams.get("abc"); // null
searchParams.get("code"); // "600570.SH"
searchParams.getAll("code"); // ["600570.SH"]
searchParams.append("xyz", "666");
searchParams.toString();
// "code=600570.SH&skin=white&name=%22%E6%81%92%E7%94%9F%E7%94%B5%E5%AD%90%22&type=%220%22&xyz=666"
decodeURIComponent(searchParams.toString());
// "code=600570.SH&skin=white&name="恒生电子"&type="0"&xyz=666"
searchParams.set("code", "600580.SH");
searchParams.get("code");
// "600580.SH"
searchParams.delete("code");
searchParams.entries();
searchParams.keys();
searchParams.values();
searchParams.sort();
for (const param of params) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
console.log(`param =`, param);
}
for (const param of params.entries()) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
console.log(`param =`, param);
}
for (const param of params.keys()) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
console.log(`param =`, param);
}
for (const param of params.values()) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
console.log(`param =`, param);
}
OK
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description SearchParamsGenerator
* @augments
* @example
*
* @param {String} search
* @param {Boolean} debug
*
*/
const SearchParams = (search = ``, debug = false) => {
const params = new URLSearchParams(search);
let result = {};
for (let param of params) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
result[key] = value;
}
return result;
};
const SearchParamsGenerator = (search = ``, debug = false) => {
const params = new URLSearchParams(search);
let result = {},
entries = [...params.entries()],
keys = [...params.keys()],
values = [...params.values()];
for (let param of params) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
result[key] = value;
}
return {
result,
entries,
keys,
values
};
};
let search = decodeURIComponent(window.location.search);
// "?code=600570.SH&skin=white&name=恒生电子&type=0"
SearchParams(search);
SearchParams(search).code;
// "600570.SH"
SearchParamsGenerator(search);
SearchParamsGenerator(search).result.code;
// "600570.SH"
ES6 modules
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description SearchParamsGenerator
* @augments
* @example
*
* @param {String} search
* @param {Boolean} debug
*
*/
const SearchParams = (search = ``, debug = false) => {
const params = new URLSearchParams(search);
let result = {};
for (let param of params) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
result[key] = value;
}
return result;
};
const SearchParamsGenerator = (search = ``, debug = false) => {
const params = new URLSearchParams(search);
let result = {},
entries = [...params.entries()],
keys = [...params.keys()],
values = [...params.values()];
for (let param of params) {
let key = ``,
value = ``;
key = param[0];
value = param[1];
result[key] = value;
}
return {
result,
entries,
keys,
values
};
};
export default SearchParams;
export {
SearchParams,
SearchParamsGenerator
};
/*
let search = decodeURIComponent(window.location.search);
// "?code=600570.SH&skin=white&name=恒生电子&type=0"
SearchParams(search);
SearchParams(search).code;
// "600570.SH"
SearchParamsGenerator(search);
SearchParamsGenerator(search).result.code;
// "600570.SH"
*/
URL
https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams
https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/searchParams
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/9138024.html
未经授权禁止转载,违者必究!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)