正则表达式使用js获取QueryString

你的名字 2021-06-10 20:42 234阅读 0赞

[http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html][http_www.cnblogs.com_sunnycoder_archive_2010_02_28_1674998.html]

从网上看到一些使用js获取QueryString的方法，但用起来不是很理想，所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。

三个主要方法：

<table style="color:rgb(0,0,0)"> 
 <tbody> 
 <tr> 
 <td style="background:rgb(217,217,217)"> 方法 </td> 
 <td style="background:rgb(217,217,217)"> 说明 </td> 
 </tr> 
 <tr> 
 <td> getQueryString </td> 
 <td> 获取QueryString的数组。 例如路径QueryStringDemo.html?id=5&amp;type=1&amp;flag=0 调用后返回["id=5", "type=1", "flag=0"] </td> 
 </tr> 
 <tr> 
 <td> getQueryStringByName </td> 
 <td> 根据QueryString参数名称获取值 </td> 
 </tr> 
 <tr> 
 <td> getQueryStringByIndex </td> 
 <td> 根据QueryString参数索引获取值 </td> 
 </tr> 
 </tbody> 
</table>

<table style="color:rgb(0,0,0)"> 
 <tbody> 
 <tr> 
 <td> //获取QueryString的数组 function&nbsp;getQueryString(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result = location.search.match(new&nbsp;RegExp("[\?\&amp;][^\?\&amp;]+=[^\?\&amp;]+","g"));&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(result ==&nbsp;null){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i = 0; i &lt; result.length; i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result[i] = result[i].substring(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; } //根据QueryString参数名称获取值 function&nbsp;getQueryStringByName(name){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result = location.search.match(new&nbsp;RegExp("[\?\&amp;]"&nbsp;+ name+&nbsp;"=([^\&amp;]+)","i")); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(result ==&nbsp;null&nbsp;|| result.length &lt; 1){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result[1]; } //根据QueryString参数索引获取值 function&nbsp;getQueryStringByIndex(index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(index ==&nbsp;null){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;queryStringList = getQueryString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(index &gt;= queryStringList.length){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result = queryStringList[index]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;startIndex = result.indexOf("=") + 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = result.substring(startIndex); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; } </td> 
 </tr> 
 </tbody> 
</table>

测试页面路径：QueryStringDemo.html?id=5&type=1&flag=0

页面加载时：

[![clip\_image001][clip_image001]][clip_image001_clip_image001]

在QueryString's name后的文本框中输入要获取的QueryString的名称获取相应的值：

[![clip\_image002][clip_image002]][clip_image002_clip_image002]

在QueryString's index后的文本框中输入要获取的QueryString的索引获取相应的值（索引从0开始）：

[![clip\_image003][clip_image003]][clip_image003_clip_image003]

这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码：

<table style="color:rgb(0,0,0)"> 
 <tbody> 
 <tr> 
 <td> &lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD XHTML 1.0 Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&nbsp;xmlns="http://www.w3.org/1999/xhtml"&gt; &nbsp; &lt;head&gt; &lt;meta&nbsp;content="text/html; charset=utf-8"&nbsp;http-equiv="Content-Type"&nbsp;/&gt; &lt;title&gt;QueryString获取&lt;/title&gt; &lt;!--script type="text/javascript" src="CommonFiles/sunnycoder.js"&gt;&lt;/script--&gt; &lt;script&nbsp;type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//获取QueryString的数组 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getQueryString(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result = location.search.match(new&nbsp;RegExp("[\?\&amp;][^\?\&amp;]+=[^\?\&amp;]+","g")); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i = 0; i &lt; result.length; i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result[i] = result[i].substring(1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//根据QueryString参数名称获取值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getQueryStringByName(name){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result = location.search.match(new&nbsp;RegExp("[\?\&amp;]"&nbsp;+ name+&nbsp;"=([^\&amp;]+)","i")); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(result ==&nbsp;null&nbsp;|| result.length &lt; 1){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result[1]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//根据QueryString参数索引获取值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getQueryStringByIndex(index){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(index ==&nbsp;null){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;queryStringList = getQueryString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(index &gt;= queryStringList.length){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result = queryStringList[index]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;startIndex = result.indexOf("=") + 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = result.substring(startIndex); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//绑定当控件高亮选中时，点击“回车键”时执行的操作 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//control：要绑定事件的控件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//func：要执行的方法 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;bindEnterEvent(control, func){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;control.onkeypress =&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(event.keyCode == 13){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;func(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//根据输入的QueryString名称获取值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getByName(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;name = document.getElementById("txtQueryStringName").value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("txtResult").innerHTML = getQueryStringByName(name); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//根据输入的QueryString的索引获取值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getByIndex(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;index = document.getElementById("txtQueryStringIndex").value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &lt;/script&gt; &lt;/head&gt; &nbsp; &lt;body&gt; &nbsp; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;QueryString :&nbsp;&lt;/span&gt;&lt;span&nbsp;id="queryString"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;QueryString's name :&amp;nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;id="txtQueryStringName"&nbsp;name="txtQueryStringName"&nbsp;type="text"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;name="btnGetByName"&nbsp;type="button"&nbsp;value="获取"&nbsp;onclick="getByName()"&nbsp;/&gt; &lt;/div&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;QueryString's index :&nbsp;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;id="txtQueryStringIndex"&nbsp;name="txtQueryStringIndex"&nbsp;type="text"&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;name="btnGetByIndex"&nbsp;type="button"&nbsp;value="获取"&nbsp;onclick="getByIndex()"&nbsp;/&gt; &nbsp; &lt;/div&gt; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;结果 ：&lt;/span&gt;&lt;span&nbsp;id="txtResult"&gt;&lt;/span&gt; &lt;/div&gt; &lt;!--页面加载时执行的操作--&gt; &lt;script&nbsp;type="text/javascript"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//显示所有QueryString &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("queryString").innerHTML = getQueryString(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//为txtQueryStringName绑定回车事件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bindEnterEvent(txtQueryStringName, getByName); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//为txtQueryStringIndex绑定回车事件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bindEnterEvent(txtQueryStringIndex, getByIndex); &lt;/script&gt; &lt;/body&gt; &nbsp; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

[http_www.cnblogs.com_sunnycoder_archive_2010_02_28_1674998.html]: http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html
[clip_image001]: http://images.cnblogs.com/cnblogs_com/sunnycoder/WindowsLiveWriter/jsQueryString_125D/clip_image001_thumb.jpg
[clip_image001_clip_image001]: /images/20210527/5a67a1dd5c42499ca460c3bce9aeec4c.png
[clip_image002]: http://images.cnblogs.com/cnblogs_com/sunnycoder/WindowsLiveWriter/jsQueryString_125D/clip_image002_thumb.jpg
[clip_image002_clip_image002]: /images/20210527/acd45d326a4a4963b25d905c3d5b676d.png
[clip_image003]: http://images.cnblogs.com/cnblogs_com/sunnycoder/WindowsLiveWriter/jsQueryString_125D/clip_image003_thumb.jpg
[clip_image003_clip_image003]: /images/20210527/2ad1ea0b8248427cb4c5246b0bd05b82.png