js獲取url參數(shù)的幾種方式

一限番、正則表達(dá)式獲取地址欄參數(shù)(代碼簡(jiǎn)介舱污,重點(diǎn)正則)

let LocString = String(window.document.location.href);//URL地址
    console.log(LocString, "LocString");
    //獲取當(dāng)前url中的參數(shù)
    function GetQueryString(name) {
      let rs = new RegExp("(^|)" + name + "=([^&]*)(&|$)", "gi").exec(
          LocString
        ),
        tmp;
      if ((tmp = rs)) return tmp[2];
      return null;
    }

調(diào)用方法

let 參數(shù)1 = GetQueryString("參數(shù)名1"));
let outcabID = GetQueryString("id"); //獲取url的id
let ConOrOper = decodeURI(GetQueryString("參數(shù)名稱(chēng)")); //獲取其他參數(shù)

二、split拆分(代碼較為復(fù)雜弥虐,交易理解)

function GetRequest() {
   let url = location.search; //獲取url中"?"符后的字串
   let theRequest = new Object();
   if (url.indexOf("?") != -1) {
      let str = url.substr(1);
      strs = str.split("&");
      for(let i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}

調(diào)用方法

let Request = new Object();
Request = GetRequest();
let 參數(shù)1,參數(shù)2 ...;
參數(shù)1 = Request['參數(shù)1'];
參數(shù)2 = Request['參數(shù)2'];
參數(shù)... = Request['參數(shù)...'];

三扩灯、split拆分法(易于理解,代碼簡(jiǎn)易理解)

function getQueryVariable(variable){
       let query = window.location.search.substring(1);
       let vars = query.split("&");
       for (let i=0;i<vars.length;i++) {
               let pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

調(diào)用方法

let 參數(shù)1 = getQueryVariable("參數(shù)名1");

補(bǔ)充URL知識(shí):

示例url = http://www.reibang.com/search?q=js&page=1&type=note

1霜瘪、window.location.href(設(shè)置或獲取整個(gè) URL 為字符串)

console.log(window.location.href)
打印結(jié)果:`http://www.reibang.com/search?q=123&page=1&type=note`

2珠插、window.location.protocol(設(shè)置或獲取 URL 的協(xié)議部分)

console.log(window.location.protocol)
打印結(jié)果:`http:`

3、window.location.host(設(shè)置或獲取 URL 的主機(jī)部分)

console.log(window.location.host)
打印結(jié)果:`www.reibang.com`

4颖对、window.location.port(設(shè)置或獲取與 URL 關(guān)聯(lián)的端口號(hào)碼)

console.log(window.location.port)
打印結(jié)果:`空字符(如果采用默認(rèn)的80端口(update:即使添加了:80)捻撑,那么返回值并不是默認(rèn)的80而是空字符)`

5、window.location.pathname(設(shè)置或獲取與 URL 的路徑部分(就是文件地址))

console.log(window.location.pathname)
打印結(jié)果:`/search`

6缤底、window.location.search(設(shè)置或獲取 href 屬性中跟在問(wèn)號(hào)后面的部分)【面試中常見(jiàn)】

console.log(window.location.search)
打印結(jié)果:`?q=123&page=1&type=note`
**PS:獲得查詢(xún)(參數(shù))部分顾患,除了給動(dòng)態(tài)語(yǔ)言賦值以外,我們同樣可以給靜態(tài)頁(yè)面个唧,并使用javascript來(lái)獲得相信應(yīng)的參數(shù)值江解。**

7、window.location.hash(設(shè)置或獲取 href 屬性中在井號(hào)“#”后面的分段)

console.log(window.location.hash)
打印結(jié)果:`空字符(因?yàn)閡rl中沒(méi)有)`
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末徙歼,一起剝皮案震驚了整個(gè)濱河市犁河,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鲁沥,老刑警劉巖呼股,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異画恰,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)吸奴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén)允扇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)缠局,“玉大人,你說(shuō)我怎么就攤上這事考润∠猎埃” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵糊治,是天一觀的道長(zhǎng)唱矛。 經(jīng)常有香客問(wèn)我,道長(zhǎng)井辜,這世上最難降的妖魔是什么绎谦? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮粥脚,結(jié)果婚禮上窃肠,老公的妹妹穿的比我還像新娘。我一直安慰自己刷允,他們只是感情好冤留,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著树灶,像睡著了一般纤怒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上天通,一...
    開(kāi)封第一講書(shū)人閱讀 51,198評(píng)論 1 299
  • 那天肪跋,我揣著相機(jī)與錄音,去河邊找鬼土砂。 笑死州既,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的萝映。 我是一名探鬼主播吴叶,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼序臂!你這毒婦竟也來(lái)了蚌卤?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤奥秆,失蹤者是張志新(化名)和其女友劉穎逊彭,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體构订,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡侮叮,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悼瘾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囊榜。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡审胸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出卸勺,到底是詐尸還是另有隱情砂沛,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布曙求,位于F島的核電站碍庵,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏悟狱。R本人自食惡果不足惜静浴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望芽淡。 院中可真熱鬧马绝,春花似錦、人聲如沸挣菲。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)白胀。三九已至椭赋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間或杠,已是汗流浹背哪怔。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留向抢,地道東北人认境。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像挟鸠,于是被迫代替她去往敵國(guó)和親叉信。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354