URL传参，用JQ进行编码后传参数给新页面，新页面用JQ进行接收，添加一个自定义函数，获取URL尾部，并用正则表达式进行筛选，最后解码并输出。

本文主要是介绍URL传参，用JQ进行编码后传参数给新页面，新页面用JQ进行接收，添加一个自定义函数，获取URL尾部，并用正则表达式进行筛选，最后解码并输出。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- A页面代码部分：
- B页面代码部分：

我用的是通过点击组件进行触发，实际所用触发方式各自发挥想象

此处用 A页面（跳转前）和 B页面（跳转后）作为代称

A页面代码部分：

<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$('span').click(function(){var num = encodeURIComponent('465')var content = encodeURIComponent(this.childNodes[0].nodeValue);location.href = "http://www.baidu.com?" + 'content'+ '=' + content + '&num' + num;});})
</script>
<body><span>这是中文内容</span>
</body>

我们都知道Http协议中参数的传输是"key=value"这种简直对形式的，如果要传多个参数就需要用“&”符号对键值对进行分割。如"?name1=value1&name2=value2"，这样在服务端在收到这种字符串的时候，会用“&”分割出每一个参数，然后再用“=”来分割出参数值。但如果参数值中包含=或&这种特殊字符的时候就产生了奇异。

如果传递的参数包含中文或者 “&” 字符，比如

location.href = http://www.baidu.com?content=AAAA&BBBB&num=465

根据下面的正则表达式你获取content的时候只剩下 “AAAA” ，因为&已经被当做结尾了。所以后面的BBBB就会被过滤掉。内容是中文的情况下则会乱码

所以传参前最好最好最好最好最好先编码。

在本案例中获取文本时为什么用childNodes[0].nodeValue而不是用innerHTML的原因是因为如果获取内容的时候包含&，&在html是转义字符，如空格 “ ”。那么获取后的结果是 ”&“ 这明显会出问题。所以通过获取节点内容的方式获取。

URL编码只是简单的在特殊字符的各个字节前加上%，%后面为其特定的数字

编码相关函数

编码：escape( )
escape( ) 方法生成新的由十六进制转义序列替换的字符串。
已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

解码：unescape( )

编码：encodeURI( )
encodeURI( ) 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列) 由两个 “代理” 字符组成)。

解码：decodeURI( )

编码：encodeURIComponent( )
encodeURIComponent() 函数通过将一个，两个，三个或四个表示字符的 UTF-8 编码的转义序列替换某些字符的每个实例来编码 URI（对于由两个“代理”字符组成的字符而言，将仅是四个转义序列）。

解码：decodeURIComponent( )

encodeURI( ) 与 encodeURIComponent( ) 最大的区别就是后者会对 =、&等字符编码，而前者不会。

由于本案例中提到的内容包含&等字符的情况会出现问题，所以用encodeURIComponent( )进行编码

最后通过点击span部分即打开B页面

B页面代码部分：

<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$('#bbb').html(getUrl('content'));})function getUrl(mane){var guize = new RegExp('(^|&)' + mane + '=([^&]*)(&|$)','i');var wenz = window.location.search.substr(1).match(guize);if(wenz != null){return decodeURIComponent(wenz[2])}return null;}
</script>
<body><span id="bbb">加载中</span>
</body>

因为获取参数可能会分多次获取，所以用函数承载。

正则表达式用来筛选出 “=” 后面的内容。

Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。

Location search 属性
search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

substr( )
substr() 方法可在字符串中抽取从开始下标开始的指定数目的字符。
提示： substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

用substr(1)去掉URL后面的问号