面试笔记（四）---怎么去除url地址的参数

梦里梦外; 2022-05-17 23:15 155阅读 0赞

#  #

## **javascript 删除 url 中指定参数,并返回 url** ##

## **前言** ##

在之前写了一篇博文[《`javascript` 操作 `url` 中 `search` 部分方法函数》][javascript_ _ _url_ _ _search_].在这篇博文里面,我们通过写好的函数可以对`url`中的各种参数进行查询,设置.唯独,忘记了删除.

而今天就是遇到要删除某个参数的问题.郁闷,于是,写了这个函数.

## **实现代码** ##

// 删除url中某个参数,并跳转

function funcUrlDel(name){

var loca = window.location;

var baseUrl = loca.origin + loca.pathname + "?";

var query = loca.search.substr(1);

if (query.indexOf(name)>-1) {

var obj = {}

var arr = query.split("&");

for (var i = 0; i < arr.length; i++) {

arr[i] = arr[i].split("=");

obj[arr[i][0]] = arr[i][1];

};

delete obj[name];

var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");

return url

};

}

**功能****:**删除`url`中指定的参数,并返回删除参数后的完整`url`

**使用方法**

示例

url: http//xx.com/list?page=1&a=5

*  1

执行代码

funcUrlDel("page")

*  1

http//xx.com/list?a=5

*  1

**其他说明**

会忽略 `hash` 值,如果需要,自行加上即可.

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作，下面通过文字说明加代码分析的形式给大家解析，具体详情请看下文。

**1****、****jquery****获取****url****很简单，代码如下：**

复制代码代码如下:

window.location.href;

其实只是用到了javascript的基础的window对象，并没有用jquery的知识。

**2****、****jquery****获取****url****参数比较复杂，要用到正则表达式，所以学好****javascript****正则式多么重要的事情**

首先看看单纯的通过javascript是如何来获取url中的某个参数：

[?][Link 1]

通过这个函数传递url中的参数名就可以获取到参数的值，比如url为

[http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx][http_localhost_33064_WebForm2.aspx_reurl_WebForm1.aspx]

我们要获取reurl的值，可以这样写：

复制代码代码如下:

var xx = getUrlParam('reurl');

明白了javascript获取url参数的方法，我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数，下面的代码为jquery扩展了一个getUrlParam()方法

[?][Link 1]

为jquery扩展了这个方法了之后我们就可以通过如下方法来获取某个参数的值了：

复制代码代码如下:

var xx = $.getUrlParam('reurl');

完整代码：

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </td> 
 <td style="border-color:#cccccc;"> &lt;script src="js/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; &nbsp;$(function () { &nbsp;&nbsp;//方法二： &nbsp;&nbsp;(function ($) { &nbsp;&nbsp;&nbsp;$.getUrlParam = function (name) { &nbsp;&nbsp;&nbsp;&nbsp;var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); &nbsp;&nbsp;&nbsp;&nbsp;var r = window.location.search.substr(1).match(reg); &nbsp;&nbsp;&nbsp;&nbsp;if (r != null) return unescape(r[2]); return null; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;})(jQuery); &nbsp;&nbsp;//方法二： &nbsp;&nbsp;var xx = $.getUrlParam('reurl'); &nbsp;&nbsp;//方法一： &nbsp;&nbsp;// var xx = getUrlParam('reurl'); &nbsp; &nbsp;&nbsp;alert(xx); &nbsp;}); &nbsp;//方法一： &nbsp;//获取url中的参数 &nbsp;function getUrlParam(name) { &nbsp;&nbsp;var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); //构造一个含有目标参数的正则表达式对象 &nbsp;&nbsp;var r = window.location.search.substr(1).match(reg); //匹配目标参数 &nbsp;&nbsp;if (r != null) return unescape(r[2]); return null; //返回参数值 &nbsp;} &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

2014-4-23 修改

今天在用上面的方法获取url中的参数时，url中传递的中文参数在解析的时候无论怎么测试，获取的都是乱码。经过一番调试后发现，我再传递参数时，对汉字编码使用的是 encodeURI ，而上面的方法在解析参数编码时使用的是unescape ,修改为 decodeURI 就可以了。

附： W3School中的介绍：

JavaScript unescape() 函数

unescape() 函数可对通过 escape() 编码的字符串进行解码。

<table style="width:332.25pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#cccccc;border-color:#C0C0C0;"> 参数 </td> 
 <td style="background-color:#cccccc;border-color:#C0C0C0;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#efefef;border-color:#C0C0C0;"> string </td> 
 <td style="background-color:#efefef;"> 必需。要解码或反转义的字符串。 </td> 
 </tr> 
 </tbody> 
</table>

说明

该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \\u00xx 和 \\uxxxx 替换这样的字符序列进行解码。

提示和注释

注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

综上： javascript对参数编码解码方法要一致：

escape() unescape()

encodeURI() decodeURI()

encodeURIComponent() decodeURIComponent()

**网上找的另一种****javascript****获取****url****中参数的方法：**

[?][Link 1]

<table style="width:495pt;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </td> 
 <td style="border-color:#cccccc;width:465pt;"> &lt;script language="JavaScript" type="text/javascript"&gt; function GetUrlParms() { &nbsp;var args=new Object(); &nbsp;var query=location.search.substring(1);//获取查询串 &nbsp;var pairs=query.split("&amp;");//在逗号处断开 &nbsp;for(var i=0;i&lt;pairs.length;i++) &nbsp;{ &nbsp;&nbsp;var pos=pairs[i].indexOf('=');//查找name=value &nbsp;&nbsp;&nbsp;if(pos==-1) continue;//如果没有找到就跳过 &nbsp;&nbsp;&nbsp;var argname=pairs[i].substring(0,pos);//提取name &nbsp;&nbsp;&nbsp;var value=pairs[i].substring(pos+1);//提取value &nbsp;&nbsp;&nbsp;args[argname]=unescape(value);//存为属性 &nbsp;} &nbsp;return args; } var args = new Object(); args = GetUrlParms(); //如果要查找参数key: if(args["id"]!=undefined) { //如果要查找参数key: var value1 = args["id"] ; alert(value1); }&lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

**jquery** **取****url****参数和在****url****加参数**

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#cccccc;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 </td> 
 <td style="border-color:#cccccc;"> (function ($) { &nbsp;$.extend({ &nbsp;&nbsp;Request: function (m) { &nbsp;&nbsp;&nbsp;var sValue = location.search.match(new RegExp("[\?\&amp;]" + m + "=([^\&amp;]*)(\&amp;?)", "i")); &nbsp;&nbsp;&nbsp;return sValue ? sValue[1] : sValue; &nbsp;&nbsp;}, &nbsp;&nbsp;UrlUpdateParams: function (url, name, value) { &nbsp;&nbsp;&nbsp;var r = url; &nbsp;&nbsp;&nbsp;if (r != null &amp;&amp; r != 'undefined' &amp;&amp; r != "") { &nbsp;&nbsp;&nbsp;&nbsp;value = encodeURIComponent(value); &nbsp;&nbsp;&nbsp;&nbsp;var reg = new RegExp("(^|)" + name + "=([^&amp;]*)(|$)"); &nbsp;&nbsp;&nbsp;&nbsp;var tmp = name + "=" + value; &nbsp;&nbsp;&nbsp;&nbsp;if (url.match(reg) != null) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = url.replace(eval(reg), tmp); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (url.match("[\?]")) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = url + "&amp;" + tmp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = url + "?" + tmp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;return r; &nbsp;&nbsp;} &nbsp; &nbsp;}); })(jQuery); </td> 
 </tr> 
 </tbody> 
</table>

使用方法

dev.zhang.com/IOF.Signup/index\_uscn\_chs.html?act=1

**1****、取值使用**

$.Request("act") = 1

**2****、****url****加参数**

$.UrlUpdateParams(window.location.href, "mid", 11111),

结果window.location.href?mid=11111

[javascript_ _ _url_ _ _search_]: http://blog.csdn.net/fungleo/article/details/51673681
[Link 1]: http://www.jb51.net/article/73896.htm
[http_localhost_33064_WebForm2.aspx_reurl_WebForm1.aspx]: http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx