JS获取页面中Url的某个参数

人生如戏，敲代码岂能儿戏

---

粒如：

有一个url为:

• http://localhost:8080/reg?productId=27&productName=奶茶&price=15

如何用正则表达式匹配，并获取查询参数得值呢？

/**
 * 获取浏览器url中的参数
 */
function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    }
    return '';
}

//获取productId参数的值
var productId= getUrlParam(productId);
//获取personName 参数的值
var personName = getUrlParam(personName);
//获取price参数的值
var price= getUrlParam(price);

• 这个方法是不是很让人头疼，一堆乱七八糟的鬼符号。但没关系，下面会进行详细讲解

正则表达式："(^|&)" + name + "=([^&]*)(&|$)"

• (^| )代表开始
• ( |$)代表结束
• &表示&符号
• (^|&)表示字符串开头或者&符号开头位置
• ([^&]*)表示任意个不含&的字符
• (&|$) 表示以&或者以空格结尾的字符串

所以这个正则表达式的意思是：字符串开头或者&符号 + url参数名 +参数值 + &或空白

window.location.search.substr(1).match(reg);

• window 表示浏览器中打开的窗口。

• location 是包含了当前url相关的信息，它是windown的一部分。

• search 是一个可读可写的属性，可设置或返回当前 URL 的查询部分（即问号 ? 之后的部分(包括?号)）

• substr(1) 返回一个从指定位置开始的指定长度的子字符串，这里设置为1，目的是为了把url中的?号去掉

  以 http://localhost:8080/reg?productId=27&productName=奶茶&price=15 为例
  

  window.location.search 
  			得到
  				   ?productId=27&productName=奶茶&price=15
  

  window.location.search.substr(1)
  			得到
  				   productId=27&productName=奶茶&price=15
  

• match(reg) 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

由match(reg) 解析来看，有点生涩难懂，所以下面进一步对 match(reg) 方法进行解析。

match(reg) 其实是一个匹配函数，它会根据传入的正则表达式参数，从原字符串（粒如：window.location.search.substr(1)得到的字符串）中匹配正则表达式指代的字串，有则返回一个数组，否则返回null

由图可以看出，match()的结果是一个数组，该数组一共有4个元素

• 第1个：正则表达式匹配到的字串
• 第2个：这里的值是由正则表达式中的(^|&)子表达式得来。如果是以原字符串首位置开头，这里的值为空；如果是以&符号开头，这里的值为&符号。
• 第3个：url参数的值
• 第4个：这里的值是由正则表达式中的(&|$)子表达式得来。如果是以空白结尾，这里的值为空；如果是以&符号结尾，这里的值为&符号。
  
  
  
  
  
  

  ---

扩展：
https://blog.csdn.net/why15732625998/article/details/70259341
https://www.cnblogs.com/ldq678/p/9375305.html