从事web开发，总是缺少不了页面之间的交互，在这个过程中核心是页面 url 参数的传递。那要怎样获取页面中 url 具体的参数呢？
首先我们先要了解一下 url 的组成，以 http://www.jianshu.com/c/bd38bd199ec6?utm_medium=index-collections&utm_source=desktop#name 为例说明。
·protocol 协议：通常是http 协议，本例子显示为：“http”；
·host 主机地址：可以是地址，也可以是ip 地址，本例子显示为：“www.jianshu.com”；
·port 端口：http 默认端口是：80端口，本例子显示为：80端口；
·pathname 路径：网络资源在服务器中的指定路径，本例子显示：“/c/bd38bd199ec6”；
·search参数：一般是“？”字符后的字符串，本例子显示为：“?utm_medium=index-collections&utm_source=desktop”；
·hash 锚点：一般是“#”后的字符串，指网页中的片段，设置锚点可以直接到达页面指定的位置，本例子显示为：“#name”。
下面我们来展示一下获取页面 url 具体参数的方法：
1、设置或获取整个url： window.location.href
var test = window.location.href;
alert(test); // http://www.jianshu.com/c/bd38bd199ec6?utm_medium=index-collections&utm_source=desktop#name
2、设置或获取 url 的 protocol 协议部分：window.location.protocol
var test = window.location.protocol;
alert(test); // http
3、设置或获取 url 的主机名：window.location.host
var test = window.location.post;
alert(test); // www.jianshu.com
4、设置或获取 url 的端口：window.location.port
var test = window.location.port;
alert(test); //空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)
5、设置或获取 url 的路径：window.location.pathname
var test = window.location.pathname;
alert(test); // /c/bd38bd199ec6
6、设置或获取 url 的参数：window.location.search
var test = window.location.search;
alert(test); // ?utm_medium=index-collections&utm_source=desktop
7、设置或获取 页面的锚点：window.location.hash
var test = window.location.hash;
alert(test); // #name
8、JavaScript 获取 url 中的参数
（1）、正则方法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); //设置正则匹配规范
var r = window.location.search.substr(1).match(reg); // 获取“？”后的字符串并正则匹配
if (r != null) {
return decodeURIComponent(r[2]); // 解码参数部分
}
return null;
}
（2）、split拆分法
function getRequest() {
var url = window.location.search;
var theRequest = new Object();
if(url.indexof != -1) { //判断是否有参数
var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("&"); //截除“&”生成一个数组
var i = 0, len = strs.length;
for(i = 0; i < len; i++) {
theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
}
}
console.log(theRequest);
}
getRequest(); // {utm_medium: "index-collections", utm_source: "desktop"}
（3）获取指定参数的值
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
var context = '';
if (r != null) {
context = r[2];
}
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}
getQueryString("utm_medium"); // "index-collections"
（4）、单个参数的获取
function GetRequest() {
var url = location.search;
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("=");
console.log(strs[1]);
}
}
GetRequest(); // index-collections&utm_source
