前言

首先,我們需要知道什么是 search , search 是 window.location 的一個(gè)屬性.舉個(gè)例子:

首先,我們這里有一個(gè) url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.

我們?cè)L問訪問這個(gè)地址,打開控制臺(tái),輸入window.location,會(huì)得到如下圖的結(jié)果

如上,我們要操作的就是上圖中方框框出來(lái)的這個(gè)部分.

為什么要操作這個(gè)?

例如,我在第二頁(yè),需要跳轉(zhuǎn)到第三頁(yè),就需要把上面的 page=2 給更新成 page=3 并且保證其他的參數(shù)保留.

又或者,本來(lái)沒有search結(jié)果(如一般列表的第一頁(yè)就啥都沒有),但我現(xiàn)在需要加上page=2.

再來(lái),我需要知道我現(xiàn)在在第幾頁(yè),也就是說(shuō),我需要獲取 page的值.

等等,都需要操作search.現(xiàn)在我們前后端分離,search是一個(gè)很重要的參數(shù)配置的方法.

構(gòu)建方法

獲取search中指定的某個(gè)參數(shù)值

百度一下,我們找到如下方法:

function GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}

方法出處:用JS獲取地址欄參數(shù)的方法

全功能方法

本來(lái)想寫實(shí)現(xiàn)思路的,但一時(shí)想不起來(lái)了,直接給最終方法:

function funcUrl(name,value,type){
var loca = window.location;
var baseUrl = type==undefined ? loca.origin + loca.pathname + "?" : "";
var query = loca.search.substr(1);
// 如果沒有傳參,就返回 search 值 不包含問號(hào)
if (name==undefined) { return query }
// 如果沒有傳值,就返回要查詢的參數(shù)的值
if (value==undefined){
var val = query.match(new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"));
return val!=null ? unescape(val[2]) : null;
};
var url;
if (query=="") {
// 如果沒有 search 值,則返回追加了參數(shù)的 url
url = baseUrl + name + "=" + value;
}else{
// 如果沒有 search 值,則在其中修改對(duì)應(yīng)的值,并且去重,最后返回 url
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];
};
obj[name] = value;
url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
};
return url;
}

使用方法

funcUrl()獲取完整search值(不包含問號(hào))

funcUrl(name)返回 url 中 name 的值(整合上一段別人的方法)

funcUrl(name,value) 將search中name的值設(shè)置為value,并返回完整url

返回內(nèi)容如 http://www.a.com/list/2.html?page=2&color=4&size=3#pic

funcUrl(name,value,type) 作用和第三條一樣,但這只返回更新好的search字符串

這里的 type 可以是任意字符,比如1;

返回內(nèi)容舉例 page=2&color=4&size=3;

一般用于從url獲取參數(shù),再對(duì)接到接口上

小結(jié)

本來(lái)想找個(gè)現(xiàn)成的插件來(lái)用,結(jié)果要么太大看不懂,要么不好使.當(dāng)然,主要還是我水平太差的原因.

所以就造個(gè)輪子玩玩,雖然代碼不夠優(yōu)雅,但是還是滿足了我的需求.如果你有更好的建議,給我留言哦.

其實(shí),主要是配合vue來(lái)用的,但這里沒有VUE的內(nèi)容,因此就不算VUE的系列教程了.

以上所述是小編給大家介紹的JavaScript操作 url 中 search 部分方法函數(shù)的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！