前端常用的操作URL的实用函数

1.URLSearchParams()

语法 ：var URLSearchParams = new URLSearchParams(init);

---

构造器创建并返回一个新的URLSearchParams 对象。 开头的'?' 字符会被忽略。

参数init（可选） 一般时一个 String

返回：一个 URLSearchParams 实例。

一个 URLSearchParams 实例

const baseUrl='www.woaini.com';

const params = new URLSearchParams();

params.set('damage', 1);

params.set('p', 2);

const _url=`${baseUrl}?${params.toString()}`

//得到一个新的 URLSearchParams 实例 _url。

---

1.1. URLSearchParams.get()

get()方法返回第一个与搜索参数对应的值。返回一个 String ；如果没找到，返回null.

//在页面https://example.com/?name=Jonathan&age=18 上

let params = new URLSearchParams(document.location.search.substring(1));

let name = params.get("name");

let age = parseInt(params.get("age"), 10);

let address = params.get("address"); 

1.1.2URLSearchParams.getAll()

以数组的形式返回与指定搜索参数对应的所有值。

let url = new URL('https://example.com?foo=1&bar=2');

let params = new URLSearchParams(url.search.slice(1));

//为foo参数添加第二个值

params.append('foo', 4);

console.log(params.getAll('foo')) //输出 ["1","4"].

1.2.URLSearchParams.has()

返回一个 Boolean 表示一个指定的键名对应的值是否存在。

varhasName= URLSearchParams.has(name) 

//name键名 要查找的参数的键名。

示例

let url = new URL('https://example.com?foo=1&bar=2'); 

let params = new URLSearchParams(url.search.slice(1)); 

params.has('bar'); 

//true

1.3.URLSearchParams.values()

URLSearchParams.values()方法返回一个iterator（迭代器），该遍历器允许遍历对象中包含的所有值。这些值都是String对象。

// 创建一个测试用URLSearchParams对象

var searchParams = new URLSearchParams("key1=value1&key2=value2");

// 输出值

for(var value of searchParams.values()) {

    console.log(value);

}

1.4URLSearchParams.append()

append() 是 URLSearchParams 接口的一个方法。可以插入一个新搜索参数。

URLSearchParams.append(name, value)

let url = new URL('https://example.com?foo=1&bar=2');

let params = new URLSearchParams(url.search.slice(1));//添加第二个foo搜索参数。

params.append('foo', 4);

//查询字符串变成: 'foo=1&bar=2&foo=4'

1.5 URLSearchParams.forEach()

  方法forEach允许通过回调函数来遍历URLSearchParams实例对象上的键值对

searchParams.forEach(callback(value,key,searchParams));

// 创建URLSearchParams对象的实例对象，用于测试

var searchParams = new URLSearchParams("key1=value1&key2=value2");

let returnValue = searchParams.forEach(function(value, key,searchParams) {

console.log('打印:',value, key,searchParams);

});

console.log(' 输出返回值',returnValue)

1.6 URLSearchParams.entries()

返回一个iterator，允许遍历该对象中包含的所有键/值对。每一组键值对都是 String对象

var searchParams = new URLSearchParams("key1=value1&key2=value2");

for(var pair of searchParams.entries()) {

    console.log('显示',pair ,pair[0]+ ', '+ pair[1]);

}

1.7URLSearchParams .values()

1.8 URLSearchParams.toString()

toString()方法 返回适用在URL中的查询字符串。

let url = new URL('https://example.com?foo=1&bar=2');

let params = new URLSearchParams(url.search.slice(1));

params.append('foo', 4);

console.log(params.toString());//Prints 'foo=1&bar=2&foo=4'.

1.9 URLSearchParams.set()

set()方法用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值，该方法会删除多余的，如果将要设置的值不存在，则创建它

URLSearchParams.set(name, value)

1.10 URLSearchParams.sort()

对包含在此对象中的所有键/值对进行排序，并返回undefined。

排序顺序是根据键的Unicode代码点。该方法使用稳定的排序算法 (即，将保留具有相等键的键/值对之间的相对顺序)。

1.11 URLSearchParams.delete()

  从搜索参数列表里删除指定的搜索参数及其对应的值。

URLSearchParams.delete(name)

---

2.url编码和解码 

 decodeURI()解码 URI。

decodeURIComponent()解码 URI 组件。

encodeURI()对 URI 进行编码。

encodeURIComponent()对 URI 组件进行编码。

escape() 在 1.5 版中已弃用。请使用 encodeURI() 或 encodeURIComponent() 代替。

unescape() 在 1.5 版中已弃用。请使用 decodeURI() 或 decodeURIComponent() 代替。

---

3.获取url相关

3.1、window.location.href(设置或获取整个 URL 为字符串)

var test = window.location.href;

alert(test);

// http://i.jb51.net/EditPosts.aspx?opt=1

3.2、window.location.protocol(设置或获取 URL 的协议部分)

var test = window.location.protocol;

alert(test);

// http:

3.3、window.location.host(设置或获取 URL 的主机部分)

var test = window.location.host;

alert(test);

// i.jb51.net

3.4、window.location.port(设置或获取与 URL 关联的端口号码)

var test = window.location.port;

alert(test);

返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)

3.5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)

var test = window.location.pathname;

alert(test);

// /EditPosts.aspx

3.6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

var test = window.location.search;

alert(test);

//?opt=1

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

3.7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)

var test = window.location.hash;

alert(test);

//空字符(因为url中没有)

3.8.获取url上的参数。

结合1中的内容，即可。但1中的方法兼容性有限制，可以选择以下方法

function getQueryString(name) {

    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');

    var r = window.location.search.substr(1).match(reg);

    if (r != null) {

        return unescape(r[2]);

    }

    return null;

}

// 这样调用： alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); alert(GetQueryString("参数名3"));

或者

function GetRequest() {

    var url = location.search; //获取url中"?"符后的字串

    var theRequest = new Object();

    if (url.indexOf("?") != -1) {

        var str = url.substr(1);

        strs = str.split("&");

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

            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

        }

    }

return theRequest;

}

var Request = new Object();

Request = GetRequest();

// var id=Request["id"];

// var 参数1,参数2,参数3,参数N;

// 参数1 = Request['参数1'];

// 参数2 = Request['参数2'];

// 参数3 = Request['参数3'];

// 参数N = Request['参数N'];

3.8、 其他方法

window.location.hostname; //返回www.xxx.com

之后会进行补充