javascript 操作 url 中 search 部分方法函数
前言
首先,我们需要知道什么是 search , search 是 window.location 的一个属性.举个例子:
首先,我们这里有一个 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.
我们访问访问这个地址,打开控制台,输入window.location,会得到如下图的结果
如上,我们要操作的就是上图中方框框出来的这个部分.
为什么要操作这个?
例如,我在第二页,需要跳转到第三页,就需要把上面的 page=2 给更新成 page=3 并且保证其他的参数保留.
又或者,本来没有search结果(如一般列表的第一页就啥都没有),但我现在需要加上page=2.
再来,我需要知道我现在在第几页,也就是说,我需要获取 page的值.
等等,都需要操作search.现在我们前后端分离,search是一个很重要的参数配置的方法.
构建方法
获取search中指定的某个参数值
百度一下,我们找到如下方法:
<code class="language-js hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">GetQueryString</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(name)</span>{</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> reg = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">RegExp</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"(^|&)"</span>+ name +<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"=([^&]*)(&|$)"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> r = window.location.search.substr(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>).match(reg); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(r!=<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>)<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">unescape</span>(r[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>]); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.218195; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>方法出处:用JS获取地址栏参数的方法
全功能方法
本来想写实现思路的,但一时想不起来了,直接给最终方法:
<code class="language-js hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">funcUrl</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(name,value,type)</span>{</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> loca = window.location; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> baseUrl = type==<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">undefined</span> ? loca.origin + loca.pathname + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"?"</span> : <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> query = loca.search.substr(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 如果没有传参,就返回 search 值 不包含问号</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (name==<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">undefined</span>) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> query } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 如果没有传值,就返回要查询的参数的值</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (value==<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">undefined</span>){ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> val = query.match(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">RegExp</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"(^|&)"</span>+ name +<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"=([^&]*)(&|$)"</span>)); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> val!=<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span> ? <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">decodeURI</span>(val[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>]) : <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">null</span>; }; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> url; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (query==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 如果没有 search 值,则返回追加了参数的 url</span> url = baseUrl + name + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"="</span> + value; }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{ <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 如果没有 search 值,则在其中修改对应的值,并且去重,最后返回 url</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> obj = {}; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> arr = query.split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"&"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> i = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; i < arr.length; i++) { arr[i] = arr[i].split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"="</span>); obj[arr[i][<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]] = arr[i][<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]; }; obj[name] = value; url = baseUrl + <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">JSON</span>.stringify(obj).replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/[\"\{\}]/g</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>).replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/\:/g</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"="</span>).replace(<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/\,/g</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"&"</span>); }; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> url;}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; opacity: 0.218195; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li></ul>使用方法
funcUrl()获取完整search值(不包含问号)funcUrl(name)返回 url 中 name 的值(整合上一段别人的方法)funcUrl(name,value) 将search中name的值设置为value,并返回完整url
- 返回内容如
http://www.a.com/list/2.html?page=2&color=4&size=3#pic
funcUrl(name,value,type) 作用和第三条一样,但这只返回更新好的search字符串
- 这里的
type 可以是任意字符,比如1; - 返回内容举例
page=2&color=4&size=3; - 一般用于从
url获取参数,再对接到接口上
小结
本来想找个现成的插件来用,结果要么太大看不懂,要么不好使.当然,主要还是我水平太差的原因.
所以就造个轮子玩玩,虽然代码不够优雅,但是还是满足了我的需求.如果你有更好的建议,给我留言哦.
其实,主要是配合vue来用的,但这里没有VUE的内容,因此就不算VUE的系列教程了.
本文由FungLeo原创,允许转载.但转载必须署名作者,并保留文章首发链接.否则将追究法律责任.
首发地址: http://blog.csdn.net/FungLeo/article/details/51673681
2016年6月24日补充
原来从别人那边整合过来的代码使用了unescape函数处理从url中传来的参数.但是发现中文在获取之后是乱码.经过查询,从 w3school JavaScript unescape() 函数得到以下内容:
注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。
因此,替换为了decodeURI()函数,就正常了.
