JavaScript操作 url 中 search 部分方法函數(shù)
前言
首先,我們需要知道什么是 search , search 是 window.location 的一個屬性.舉個例子:
首先,我們這里有一個 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.
我們訪問訪問這個地址,打開控制臺,輸入window.location,會得到如下圖的結(jié)果
如上,我們要操作的就是上圖中方框框出來的這個部分.
為什么要操作這個?
例如,我在第二頁,需要跳轉(zhuǎn)到第三頁,就需要把上面的 page=2 給更新成 page=3 并且保證其他的參數(shù)保留.
又或者,本來沒有search結(jié)果(如一般列表的第一頁就啥都沒有),但我現(xiàn)在需要加上page=2.
再來,我需要知道我現(xiàn)在在第幾頁,也就是說,我需要獲取 page的值.
等等,都需要操作search.現(xiàn)在我們前后端分離,search是一個很重要的參數(shù)配置的方法.
構(gòu)建方法
獲取search中指定的某個參數(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ù)的方法
全功能方法
本來想寫實現(xiàn)思路的,但一時想不起來了,直接給最終方法:
function funcUrl(name,value,type){ var loca = window.location; var baseUrl = type==undefined ? loca.origin + loca.pathname + "?" : ""; var query = loca.search.substr(1); // 如果沒有傳參,就返回 search 值 不包含問號 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 值,則在其中修改對應(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值(不包含問號)
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ù),再對接到接口上
小結(jié)
本來想找個現(xiàn)成的插件來用,結(jié)果要么太大看不懂,要么不好使.當(dāng)然,主要還是我水平太差的原因.
所以就造個輪子玩玩,雖然代碼不夠優(yōu)雅,但是還是滿足了我的需求.如果你有更好的建議,給我留言哦.
其實,主要是配合vue來用的,但這里沒有VUE的內(nèi)容,因此就不算VUE的系列教程了.
以上所述是小編給大家介紹的JavaScript操作 url 中 search 部分方法函數(shù)的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JS實現(xiàn)數(shù)組去重方法總結(jié)(六種方法)
這篇文章給大家總結(jié)下JS實現(xiàn)數(shù)組去重方法(六種方法),面試中也經(jīng)常會遇到這個問題。文中給大家引申的還有合并數(shù)組并去重的方法,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2017-07-07JS與CSS3實現(xiàn)圖片響應(yīng)鼠標(biāo)移動放大效果示例
這篇文章主要介紹了JS與CSS3實現(xiàn)圖片響應(yīng)鼠標(biāo)移動放大效果,結(jié)合實例形式分析了javascript與css3響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素屬性實現(xiàn)圖片放大效果相關(guān)操作技巧,需要的朋友可以參考下2018-05-05echarts實現(xiàn)雷達(dá)圖的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于echarts實現(xiàn)雷達(dá)圖的詳細(xì)步驟,雷達(dá)圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個變量(三個或更多)在二維平面上進(jìn)行比較,文中給出了完整的代碼示例,需要的朋友可以參考下2024-01-01Javascript中獲取瀏覽器類型和操作系統(tǒng)版本等客戶端信息常用代碼
跟蹤一些最基本的客戶端訪問信息,這里將一些公用的代碼總結(jié)下來,需要的朋友可以參考下2016-06-06JS基于ES6新特性async await進(jìn)行異步處理操作示例
這篇文章主要介紹了JS基于ES6新特性async await進(jìn)行異步處理操作,結(jié)合實例形式分析了async await進(jìn)行異步處理操作的相關(guān)原理、步驟與注意事項,需要的朋友可以參考下2019-02-02