js获取url参数值的几种方式

简介: js获取url参数值的几种方式

方法一:采用正则表达式获取地址栏参数 (代码简洁,重点正则)

function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
};
return null;
}
调用方法:
let 参数1 = GetQueryString("参数名1"));
方法二:split拆分法 (代码较复杂,较易理解)

function GetRequest() {
const url = location.search; //获取url中"?"符后的字串
let theRequest = new Object();
if (url.indexOf("?") != -1) {
let str = url.substr(1);
strs = str.split("&");
for(let i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
调用方法:
let Request = new Object();
Request = GetRequest();
var 参数1,参数2 ...;
参数1 = Request['参数1'];
参数2 = Request['参数2'];
参数... = Request['参数...'];
方法三:split拆分法(易于理解,代码中规)

function getQueryVariable(variable){
let query = window.location.search.substring(1);
let vars = query.split("&");
for (let i=0;i<vars.length;i++) {
let pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
调用方法:
let 参数1 = getQueryVariable("参数名1");

补充URL知识:
示例url = http://www.jianshu.com/search?q=js&page=1&type=note

1、window.location.href(设置或获取整个 URL 为字符串)
console.log(window.location.href)
打印结果:http://www.jianshu.com/search?q=123&page=1&type=note
2、window.location.protocol(设置或获取 URL 的协议部分)
console.log(window.location.protocol)
打印结果:http:
3、window.location.host(设置或获取 URL 的主机部分)
console.log(window.location.host)
打印结果:www.jianshu.com
4、window.location.port(设置或获取与 URL 关联的端口号码)
console.log(window.location.port)
打印结果:空字符(如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符)
5、window.location.pathname(设置或获取与 URL 的路径部分(就是文件地址))
console.log(window.location.pathname)
打印结果:/search
6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)
console.log(window.location.search)
打印结果:?q=123&page=1&type=note
PS:获得查询(参数)部分,除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值。
7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)
console.log(window.location.hash)
打印结果:空字符(因为url中没有)

相关文章
|
8天前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
11天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
23 0
|
2月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url
|
4月前
|
JavaScript
【干货】js判断url是否是合法http/https
【干货】js判断url是否是合法http/https
245 1
|
3月前
|
JavaScript
js 下载文件(根据URL下载文件,根据URL下载图片)
js 下载文件(根据URL下载文件,根据URL下载图片)
340 0
|
3月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
105 0
|
3月前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
60 0
|
4月前
|
JavaScript 前端开发 API
详解JS的URL()和URLSearchParams() API接口
详解JS的URL()和URLSearchParams() API接口
66 2
|
5月前
|
JavaScript 前端开发
javascript获取url信息的常见方法
javascript获取url信息的常见方法
57 2
|
5月前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。