urlSearch的信息处理以及URLSearchParams

location.search和HTMLHyperlinkElementUtils.search都包含URL参数的一个DOMString，开头有一个“?”。

location对象不用多说，其search属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分。

如，某页面url为http://blog.michealwayne.cn/index.html?id=wayne&year=2019&month=06&date=19，其location.search为

1
console.log(location.search);		// "?id=wayne&year=2019&month=06&date=19"

如果要修改，可以直接赋值操作，如

1
location.search = '?id=micheal&fulldate=2019-06-19';

其中第一位’?’可省略，同

1
location.search = 'id=micheal&fulldate=2019-06-19';

此时页面将重新加载，浏览器地址栏的url也将替换

与location.search类似，HTMLHyperlinkElementUtils.search属性是一个可读可写的字符串，但它作用于DOM锚点元素，可设置或返回当前 URL 的查询部分。

如

1
2
3
<body>
	<a id="test" href="http://blog.michealwayne.cn/index.html?id=wayne&year=2019&month=06&date=19">test link</a>
</body>

其HTMLHyperlinkElementUtils.search为

1
console.log(document.getElementById('test').search);	// "?id=wayne&year=2019&month=06&date=19"

如果要修改，可以直接赋值操作，如

1
document.getElementById('test').search = '?id=micheal&fulldate=2019-06-19';

其中第一位’?’可省略，同

1
document.getElementById('test').search = 'id=micheal&fulldate=2019-06-19';

2.通过location.search获取信息

很多时候，页面间跳转需要传递数据信息，或者客户端打开webview时需要传值。这种时候因为跨域等原因无法或不适合用Storage以及cookie来记录传递，这时候最普遍的做法就是通过search参数或hash参数（hash参数在本文不做介绍）。

还是刚才的地址（http://blog.michealwayne.cn/index.html?id=wayne&year=2019&month=06&date=19），那么该如何获取带来的字段信息呢？

location.search字符串解析

search参数携带的信息键值对一般以key=value的形式展示，多个键值对之间以’&’字符进行拼接，由此规则我们可以用以下函数进行对location.search的解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * @function getUrlParam
 * @description 根据参数获取location.search信息
 * @param {String} name 键值
 * @param {Boolean} decode 指定decode方式
 * @return {String} 参数值
 */
function getUrlParam (name, decode) {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    let r = window.location.search.substr(1).match(reg); //匹配目标参数

    if (r) {
        if (!decode) {
            return decodeURI(r[2]);
        } else {
            return eval(decode + '(r[2])');
        }
    }
    return null;
}

其中为何要用decodeURI()方法进行解码呢？主要是因为中文等字符在url中会被编码，比如http://blog.michealwayne.cn/index.html?name=吴彦祖，其search为

1
console.log(location.search);	// "?name=%E5%90%B4%E5%BD%A6%E7%A5%96"

这时要转回中文的话就需要借助decodeURI()方法。

通过上面的函数，我们可以拿到所需要的字段信息

1
2
3
4
5
getUrlParam('id');	// "wayne"
getUrlParam('year');	// "2019"
getUrlParam('month');	// "06"
getUrlParam('date');	// "19"
getUrlParam('hahaha');	// null

那么除了通过自定义的search解析方法外还有更快捷的途径吗？这就是接下来要介绍的URLSearchParams()对象。

3.URLSearchParams()

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。其构造函数为：URLSearchParams()。

URLSearchParams提供以下方法：

  • append()： 插入一个指定的键/值对作为新的搜索参数。
  • delete()： 从搜索参数列表里删除指定的搜索参数及其对应的值。
  • entries()：返回一个iterator可以遍历所有键/值对的对象。
  • get()：获取指定搜索参数的第一个值。
  • getAll()：获取指定搜索参数的所有值，返回是一个数组。
  • has()：返回 Boolean 判断是否存在此搜索参数。
  • keys()：返回iterator 此对象包含了键/值对的所有键名。
  • set()：设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。
  • sort()：按键名排序。
  • toString()：返回搜索参数组成的字符串，可直接使用在URL上。
  • values()：返回iterator 此对象包含了键/值对的所有值。

还是刚才的地址（http://blog.michealwayne.cn/index.html?id=wayne&year=2019&month=06&date=19），那么该如何获取带来的字段信息呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let searchParams = new URLSearchParams(location.search);

searchParams.get('id');	// 'wayne'
searchParams.get('year');	// '2019'

searchParams.has('month');	// true
searchParams.has('hahaha');	// false

searchParams.append('name', '吴彦祖');
searchParams.toString();	// "id=wayne&year=2019&month=06&date=19&name=%E5%90%B4%E5%BD%A6%E7%A5%96"

searchParams.sort();
searchParams.delete('year');
searchParams.toString();	// "date=19&id=wayne&month=06&name=%E5%90%B4%E5%BD%A6%E7%A5%96"

URLSearchParams()对象无疑对search的操作提供了更灵活、全面的操作，只是它的兼容并不够好：

URLSearchParams compatibility

Android需要5及以上，ios需要10.3及以上，IE全军覆没。

当然我们可以通过封装做到向下兼容，也就是

url-search-params-polyfill

npm url-search-params-polyfill。
安装：

1
npm i -D url-search-params-polyfill

使用同 URLSearchParams()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import 'url-search-params-polyfill'

// new an empty object
var search1 = new URLSearchParams();
 
// from a string
var search2 = new URLSearchParams("id=1&from=home");
 
// from an object
var search3 = new URLSearchParams({ id: 1, from: "home" });
 
// from location.search, will remove first "?" automatically
var search4 = new URLSearchParams(window.location.search);
 
// from anther URLSearchParams object
var search5 = new URLSearchParams(search2);

参考资料