loading...

1

用JS获取url地址栏参数的方法

javascript读完大概需要8分钟

  • 发布时间:2017-07-31 23:06 星期一
  • 刘伟波
  • 269
  • 更新于2018-02-20 12:02 星期二

方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)


function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
 
// 调用方法
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

下面举一个例子:

若地址栏URL为:abc.html?id=123&url=http://www.maidq.com

那么,但你用上面的方法去调用:alert(GetQueryString("url"));

则会弹出一个对话框:内容就是 http://www.maidq.com

如果用:alert(GetQueryString("id"));那么弹出的内容就是 123 啦;

当然如果你没有传参数的话,比如你的地址是 abc.html 后面没有参数,那强行输出调用结果有的时候会报错:

所以我们要加一个判断 ,判断我们请求的参数是否为空,首先把值赋给一个变量:

var myurl=GetQueryString("url");
if(myurl !=null && myurl.toString().length>1)
{
   alert(GetQueryString("url"));
}

这样就不会报错了!


方法二:传统方法


<script type="text/javascript">

function UrlSearch() {   

var name,value;    

var str=location.href; //取得整个地址栏   

var num=str.indexOf("?")    str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

   var arr=str.split("&"); //各个参数放到数组里 

  for(var i=0;i < arr.length;i++){    

 num=arr[i].indexOf("=");   

  if(num>0){   

   name=arr[i].substring(0,num);   

  value=arr[i].substr(num+1);   

  this[name]=value;     }     } } 

var Request=new UrlSearch(); //实例化

alert(Request.id);

</script>


三 jq封装


明白了javascript获取url参数的方法,我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数,下面的代

码为jquery扩展了一个getUrlParam()方法

复制代码

代码如下:


(function($){
$.getUrlParam
 = function(name)
{
var reg
 = new RegExp("(^|&)"+
 name +"=([^&]*)(&|$)");
var r
 = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;

// ECMAScript v3 已从标准中删除了 unescape() 函数,并反对使用它,因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

}
})(jQuery);



为jquery扩展了这个方法了之后我们就可以通过如下方法来获取某个参数的值了

代码如下:


$.getUrlParam('cid');


四 match函数


该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
例子:
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>

输出:
world
null
null
world!


例子 2

在本例中,我们将使用全局匹配的正则表达式来检索字符串中的所有数字:

<script type="text/javascript">

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))

</script>

输出:

1,2,3



ES6

var url='abc.html?id=123&url=http://www.maidq.com&class=lwb';
console.log(url.match(/[^&?=]+[=][^&?=]+/g).reduce((all,a)=>{
var item=a.split('=');
if(!all[item[0]]){
all[item[0]]=item[1]
}
return all
},{}));


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!