- 正常情况下的url:https://www.jianshu.com/p/e61315e04444
- 拼接参数的 https://www.jianshu.com/p/e61315e04444?a=1
- 或者这样的 https://www.jianshu.com/p/e61315e04444?a=1&b=2&c=3&d=4
- 总的来说:是key=value的形式
- 实现
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURI(r[2]);
} else {
return null;
}
}
-
细节
- 其中
"(^|&)" + name + "=([^&]*)(&|$)"
含义:取以name
开头或者以&
开头以&
或者以$
结尾的字符串
(^|&)
:匹配字符串开头或者&字符,如果其后还有正则,那么必须出现在字符串开始或&字符之后
([^&]*)
:[^&]
匹配除了&之外的任意字符,([^&]*)
匹配除了&之外的任意字符 0或多次
(&|$)
:匹配以&或者以$结尾的字符串
i
:表示匹配时不区分大小写 -
window.location.search.substr(1).match(reg)
的意思是找出?之后匹配reg的字符串 -
substr(start,end)
:截取字符串 -
match()
方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回一个数组 - 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
-
decodeURIComponent(r[2])
的意思是对所选的字符串进行解码
- 其中
获取
var value= getQueryString("key");
url相关参数
location对象 含有当前URL的信息. 属性 href 整个URL字符串.
protocol 含有URL第一部分的字符串,如http:
host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/
hostname 包含URL中主机名的字符串.如http://www.cenpok.net ;
port 包含URL中可能存在的端口号字符串.
pathname URL中"/"以后的部分.如~list/index.html
hash "#"号(CGI参数)之后的字符串.
search "?"号(CGI参数)之后的字符串.遇到问题
少数情况,出现,打开网页,url将&
解析成&
,造成该方法无法获取到url携带的参数
&
是html中的或者url地址栏中的转义字符,就是代表&的意思
即本来url为https://www.jianshu.com/p/e61315e04444?a=1&b=2&c=3&d=4
被解析为https://www.jianshu.com/p/e61315e04444?a=1&b=2&c=3&d=4
解决办法
截取掉amp;
,再使用该方法
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
/* 添加了中间这段代码*/
if (window.location.search.indexOf("amp;")) {
var reg01 = new RegExp("amp;", "g");
var url = window.location.search.replace(reg01,"");
r = url.substr(1).match(reg);
}
/*添加了中间这段代码*/
if (r != null) {
return decodeURI(r[2]);
} else {
return null;
}
}