URLSearchParams & Location & URL params parse
2024-09-02 06:59:04
URLSearchParams & Location & URL params parse
URL params parse
node.js env bug
node.js & ReferenceError: document is not defined
/*
题目描述
获取 url 中的参数
1. 指定参数名称，返回该参数的值 或者 空字符串
2. 不指定参数名称，返回全部的参数对象 或者 {}
3. 如果存在多个同名参数，则返回数组
示例1
输入 http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe key
输出 [1, 2, 3]
*/
function getUrlParam(sUrl, sKey) {
const log = console.log;
const a = document.createElement('a');
// node.js & ReferenceError: document is not defined
a.href = sUrl;
// a.href = `http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`;
const searchParams = new URLSearchParams(a.search);
if(sKey) {
if(searchParams.has(sKey)) {
const keys = searchParams.getAll(sKey);
return keys.length > 1 ? keys : keys[0];
} else {
return "";
}
} else {
const obj = {};
for (const item of searchParams) {
const [k, v] = item;
obj[k] = v;
}
return obj;
}
}
/*
getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`, `key`);
// ["1", "2", "3"]
getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`);
// {key: ["1", "2", "3"], test: ["4"]}
getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`, `test`);
// "4"
getUrlParam(`http://www.xgqfrms.xyz?key=1&key=2&key=3&test=4#hehe`, `shit`);
// ""
*/
URLSearchParams
The URLSearchParams constructor does not parse full URLs.
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"
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Location
query string
// Create anchor element and use href property for the purpose of this example
// A more correct alternative is to browse to the URL and use document.location or window.location
const al = document.createElement('a');
a.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
// query string
console.log(a.search); // ?q=URL
console.log(a.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
console.log(a.protocol); // https:
console.log(al.host); // developer.mozilla.org:8080
console.log(a.hostname); // developer.mozilla.org
console.log(a.port); // 8080
console.log(a.pathname); // /en-US/search
console.log(a.hash); // #search-results-close-container
console.log(al.origin); // https://developer.mozilla.org:8080
https://developer.mozilla.org/en-US/docs/Web/API/Location
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/en-US/docs/Web/API/Document/location
demo
function getUrlParam(sUrl, sKey) {
const a = document.createElement('a');
a.href = `http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe`;
}
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- H5 Notes：PostMessage Cross-Origin Communication
- js实现一个简单计算器
- PL/0编译器实践---后记
- 浅析angular，react，vue.js jQuery使用区别
- 黑马程序员——OC基础 三种特性之封装
- 使用if else if else 统计计算
- zookeeper windows 入门安装和测试
- asp.net mvc4 设置build项目时，编译view页面
- java22 - 1 多线程之 单线程和多线程的图解
- Oracle表空间管理
- TP控制器(Controller)
- Java I/O第二篇 之 (缓冲流 随机流 数组流 数据流)
- 查询EBS在线用户SQL(R12)
- 彻底解决Android因加载多个大图引起的OutOfMemoryError，内存溢出的问题
- react-router简明学习
- 【Uva 11280 飞到弗雷德里顿】
- 百度uid-generator源码
- Component 父子组件关系
- Vue.js学习笔记——表单控件实践
- java程序性能优化读书笔记-垃圾回收