正则表达式解析前端请求地址参数

author: Nathannie
date: 2022-04-17-00:05

需求/前言

学习SSM项目，遇到问题，其中因为获取不到请求参数导致无法获取所需数据，这一步，学习的视频中使用一个工具方法getQueryString，涉及到正则表达式内容，对这块不了解，耽误了时间。因此特地学习研究一下。

分析

步骤：

1. 获取浏览器地址栏请求的地址url（带请求参数,形如http://8080/xxx/yyy/?xxx=yyy&xxx=yyy。
2. 获取参数部分的字符串内容，形如?xxx=yyy&xxx=yyy。
3. 使用正则表达式解析出参数值，形如yyy。

步骤

1. 获取参数部分的字符串内容： window.location.search,可以得到?xxx=yyy&xxx=yyy这部分。
2. 使用正则表达式解析出参数值：new RegExp("(^|&)" + name + "=([^&]*)(&|$)")创建一个正则表达式匹配模式，可以匹配出xxx=yyy或&xxx=yyy的内容，也即请求参数部分（除去?）。

代码

function getQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    var r = window.location.search.substr(1).match(reg);
    if (r !== null) {
        return decodeURIComponent(r[2]);
    }
    return '';
}

分析：

• (^|&)匹配字符串开头或者&字符。
• name匹配我们要取的GET参数的名字。
• ([^&]*)匹配非&之外的任意字符，*表示任意数量。
• (&|$)匹配&字符或者结束。
  也就是说找到以”(&)name=xxx(&)”样式的内容。

然后window.location.search表示从问号(?)开始的url部分，substr(1)表示从字符串中抽掉第一个字符，也就是去掉问号(?)。（参考)

问题： 目的是获取参数部分内容，但是上述正则表达式写成(^|[a-zA-Z0-9]+)=([^&]*)|$无法获取所需内容？（有待研究）。经过测试，这个正则表达式(^|[a-zA-Z0-9]+)=([^&]*)|$，可以完全获取参数部分内容：

参考

• https://blog.csdn.net/m0_48182879/article/details/106516426
• https://blog.csdn.net/tfstone/article/details/80446093