JavaScript获取URL中参数querystring的方法详解

一. 获取url的querystring参数

获取url的querystring参数的两种方法如下：

1.1 方法一：正则匹配

//获取url中的参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数
  var result = window.location.search.substr(1).match(reg); // 对querystring匹配目标参数
  if (result != null) {
    return decodeURIComponent(result[2]);
  } else {
    return null;
  }
}

对于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url，获取 q1 参数值的方法如下：

var q1 = getQueryString('q1'); // abc

1.2 方法二：split

function getQueryString() {
  var qs = location.search.substr(1), // 获取url中"?"符后的字串
    args = {}, // 保存参数数据的对象
    items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
    item = null,
    len = items.length;

  for(var i = 0; i < len; i++) {
    item = items[i].split("=");
    var name = decodeURIComponent(item[0]),
      value = decodeURIComponent(item[1]);
    if(name) {
      args[name] = value;
    }
  }
  return args;
}

对于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url，获取 q1 参数值的方法如下：

var qs = getQueryString(); 

var q1 = qs["q1"]; // abc

用上面两种getQueryString()方法都能很好地解决获取url的querystring参数问题。就此顺便整理一下Location对象，方便日后学习参考。

二. Location对象的属性

备注：以 http://localhost:80/dir/index.html?q1=abc&q2=efg&q3=h#anchor 为例：

location的这8个属性都是可读写的。

其中，改变location.href会跳转到新的URL页面，而修改location.hash会跳到当前页面中锚点位置。

每次修改window.location的属性（hash除外），页面都会以新的URL重新加载，并在浏览器的历史纪录中生成一条新纪录。

三. Location对象的方法

其中，location.assign(url) 的效果跟下列两行代码的效果完全一样：

window.location = url;
location.href = url;

位于 location.reload() 调用之后的代码可能会也可能不会执行，这取决于网络延迟或系统资源等因素。因此，最好将 location.reload() 放在代码的最后一行。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • JS获取URL中参数值（QueryString）的4种方法分享

    方法一:正则法 复制代码 代码如下: function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');    var r = window.location.search.substr(1).match(reg);    if (r != null) {        return unescape(r[2]);    }    return null;}/

  • JS获取URL中的参数数据

    复制代码 代码如下: function getParam(paramName) {    paramValue = "";    isFound = false;    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {        arrSource = unescape(this.location.

  • js获取url参数值的两种方式

    方法一:正则分析法 复制代码 代码如下: function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return n

  • 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = request("type") function request() { var query = location.search; var paras = arguments[0]; if (arguments.length == 2) { query = arguments[1]; }

  • 获取url中用&隔开的参数实例(分享)

    例如,当前网页中的url为https://www.baidu.com?a=111&b=222 想要获取url中的a,b参数,代码如下: function getParmFormUrl(name){ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(re

  • 浅析JS获取url中的参数实例代码

    js获取url中的参数代码如下所示,代码简单易懂,附有注释,写的不好还请见谅! 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("&&

  • JavaScript获取URL中参数querystring的方法详解

    JavaScript获取URL中参数querystring的方法详解

    一. 获取url的querystring参数 获取url的querystring参数的两种方法如下: 1.1 方法一:正则匹配 //获取url中的参数 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数 var result = window.location.search.substr(1).

  • 使用JavaScript获取Request中参数的值方法

    假设现在有一个URL,如下. http://www.jb51.net 如何通过JS访问到id和name里面的值呢,实现我们来分析一下思路. 先获取当前页面的URL,通过window.location.href. 提取该URL?后面的部分,通过slice()方法. 把获取到的Request对象分割成字符串数组,通过split() 方法. 接下来看代码. function getUrlVars() { var vars = [], hash; var hashes = window.location

  • JavaScript获取ul中li个数的方法

    本文实例讲述了JavaScript获取ul中li个数的方法.分享给大家供大家参考,具体如下: 有这样一段HTML代码: <ul id="mycarousel"> <li><img src=01_MED.jpg height=80 width=100/></li> <li><img src=02_MED.jpg height=80 width=100/></li> <li><img sr

  • PHP自定义函数获取URL中一级域名的方法

    PHP自定义函数获取URL中一级域名的方法

    本文实例讲述了PHP自定义函数获取URL中一级域名的方法.分享给大家供大家参考,具体如下: <?php /* * Created on 2016-8-23 */ function regular_domain($domain) { if (substr ( $domain, 0, 7 ) == 'http://') { $domain = substr ( $domain, 7 ); } if (strpos ( $domain, '/' ) !== false) { $domain = sub

  • JavaScript获取页面中超链接数量的方法

    JavaScript获取页面中超链接数量的方法

    本文实例讲述了JavaScript获取页面中超链接数量的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript取得页面的超链接数,感兴趣的朋友可以学习借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-total-link-num-codes/ 具体代码如下: <html> <head> <title>JavaScript取得页面的超链接数</title> <script l

  • 通过正则表达式获取url中参数的简单实现

    url: http://xxxx.com?name=魅力&id=123 js中: var name = getUrlParam("name"); /*通过正则获取url中的参数*/ function getUrlParam(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.subst

  • JavaScript获取select中text值的方法

    本文实例讲述了JavaScript获取select中text值的方法.分享给大家供大家参考,具体如下: 别的不说,先看代码: 方法一: <select name="parent_id" onchange="setTitleAndLinkByGoodsCategory(this.value,this.options[this.selectedIndex].text);" > <option value="0">请选择商品分类

  • JavaScript判断两个值相等的方法详解

    JavaScript判断两个值相等的方法详解

    目录 前言 非严格相等 严格相等 同值零 同值 总结 前言 在 JavaScript 中如何判断两个值相等,这个问题看起来非常简单,但并非如此,在 JavaScript 中存在 4 种不同的相等逻辑,如果你不知道他们的区别,或者认为判断相等非常简单,那么本文非常适合你阅读. ECMAScript 是 JavaScript 的语言规范,在ECMAScript 规范中存在四种相等算法,如下图所示: 上图中四种算法对应的中文名字如下,大部分前端应该熟悉严格相等和非严格相等,但对于同值零和同值却不熟悉,

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

随机推荐