前端常用的操作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

之后会进行补充

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容