2013年4月9日 星期二

JavaScript取得URL的QueryString

上週都再看node.js..
讓我打岔一下,這一篇我來寫一下我的javascript練習
(其實是因為看了網路上的前端面試考題xd)
題目類似是如何使用JavaScript取得URL的QueryString

如果有使用server side語言的話
比方說PHP可以用$_GET去接URL的querystring.
什麼是querystring可參考http://en.wikipedia.org/wiki/Query_string
就我所知有些人會用jQuery的param去抓(我沒用過xd)

不過我比較好奇怎麼用純javascript去抓,
當我們再抓取URL Querystring的時候
我上網去找找有什麼方法
參考: window.location  http://www.w3schools.com/jsref/obj_location.asp

我的做法是使用location.search (用window.location.pathname也可以)
看你是要抓完整的URL還是從?號開始抓

當我的網址是
http://yiyingloveart.blogspot.tw/?name=win&sex=girl&age=24&job=frontend

location.search的結果是(型別是string):
"?name=win&sex=girl&age=24&job=frontend"


var uri = location.search;
var obj = { };  //Object
function parsrQueryString(uri){
  var string_array = [ ];//Array
  var string_array = uri.replace('?','').split("&");
  //replace('?','')拿掉第一個問號
   

  for(var i =0;i<string_array.length; i++){
      //console.log(string_array[i].split('=')[0]);     //[0]取得key name
     //console.log(string_array[i].split('=')[1]);     //[1]取得value
     obj[ string_array[i].split('=')[0] ] = string_array[i].split('=')[1] || '';
     
//沒有值就預設為''

  }
}
parsrQueryString(uri);

console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
console.log(obj.job);

此時得到的log結果是:

win (console.log(obj.name)的結果)
girl (console.log(obj.sex)的結果)
24 (console.log(obj.age)的結果)
frontend (console.log(obj.job)的結果)


我之所以可以這樣log出來是因為我已經知道我的url有哪些key了
但有時候我們並不知道有哪些key,如何得知Obj有哪些key?
可參考 http://stackoverflow.com/questions/3068534/getting-javascript-object-key-list
var keys = [];
for(var k in obj) keys.push(k);
console.log("total " + keys.length + " keys: " + keys);

另外網路上也有一篇寫得很好
JavaScript regex trick: Parse a query string into an object
不過這篇寫得蠻深的,正規用的很猛.

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...