Implementation code for extracting parameters from URL and converting objects into URL query parameters_javascript skills

1. Extract parameters from URL

has the following string:

var linkURL = 'http://localhost:8080/String/string_6.html?nickname=小西山子&age=24 #id1';
For a real URL address, you can use js to read the relevant information in the location to obtain some information. Here are some:

Copy the code The code is as follows:

location.origin: http://localhost[domain]
location.pathname: /project_js/Javascript/js_basic/demo /String/string_6.html [URL path]
location.host : localhost [host port]
location.hostname : localhost [host name]
location.port : [port]
location.search : ?name=xesam【query string】
location.hash : #age【anchor】
location.href : http://localhost/project_js/Javascript/js_basic/demo/String/string_6.html? name=xesam#age[Full form]
location.protocol: http[Protocol]

Among them, location.search is mainly used to extract parameters from the URL. However, for the sake of generality, we do not read location.search and process the string directly.

After extracting the string query string, convert it into the form of an object.

First discuss several query string situations:

(1)? Nickname=小西山子&age=24#id1 -->{Nickname: '小西山子',age :'24'}

(2)?nickname&age=24#id1'; -->{nickname:undefined,age:'24'}

(3)?=small Xishanzi&age=24#id1 -->{age:'24'}

(4)? Nickname=小西山子=Another&age=24&age=24#id1 -->{Nickname: 'Xiaoxi Shanzi=Another one',age:['24','24']}

Copy code The code is as follows:

function toQueryParams(){
var search = this.replace(/^s /,'').replace(/s $/,'').match(/([^ ?#]*)(#.*)?$/);//Extract the part after '?' in location.search
if(!search){
return {};
}
var searchStr = search[1];
var searchHash = searchStr.split('&');

var ret = {};
for(var i = 0, len = searchHash. length; i < len; i ){ //You can call each method here
var pair = searchHash[i];
if((pair = pair.split('='))[0]){
var key = decodeURIComponent(pair.shift());
var value = pair.length > 1 ? pair.join('=') : pair[0];
console.log()
if(value != undefined){
value = decodeURIComponent(value);
}
if(key in ret){
if(ret[key].constructor != Array) {
ret[key] = [ret[key]];
}
ret[key].push(value);
}else{
ret[key] = value;
}
}
}
return ret;
}
console.dir(toQueryParams.call(linkURL));

The above is basically what is in Prototype In the implementation of toQueryParams, another step above is to use '=' to split the parameters and then splice them in value. In addition, you can use substring to achieve:

Copy code The code is as follows:

function toQueryParams(){
var search = this.replace(/^s /,'').replace(/s $/,'').match(/([^?#]*)(#.*)?$/) ;
if(!search){
return {};
}
var searchStr = search[1];
var searchHash = searchStr.split('&');

var ret = {};
searchHash.forEach(function(pair){
var temp = '';
if(temp = (pair.split('=',1))[ 0]){
var key = decodeURIComponent(temp);
var value = pair.substring(key.length 1);
if(value != undefined){
value = decodeURIComponent(value );
}
if(key in ret){
if(ret[key].constructor != Array){
ret[key] = [ret[key]];
}
ret[key].push(value);
}else{
ret[key] = value;
}
}
});
return ret;
}
console.dir(toQueryParams.call(linkURL));

1. Convert objects to URL query parameters

Convert objects to URL queries The parameters are a little more troublesome. However, since it is converted into query parameter form, it can only process single-layer nested objects, and sub-objects cannot be processed. The principle is the reverse operation of toQueryParams.

Copy code The code is as follows:

function toQueryPair(key, value) {
if (typeof value == 'undefined'){
return key;
}
return key '=' encodeURIComponent(value === null ? '' : String(value));
}
function toQueryString(obj) {
var ret = [];
for(var key in obj){
key = encodeURIComponent(key);
var values = obj[key];
if(values && values.constructor == Array){//数组
var queryValues = [];
for (var i = 0, len = values.length, value; i < len; i ) {
value = values[i];
queryValues.push(toQueryPair(key, value));
}
ret = ret.concat(queryValues);
}else{ //字符串
ret.push(toQueryPair(key, values));
}
}
return ret.join('&');
}
console.log(toQueryString({
name : 'xesam',
age : 24
})); //name=xesam&age=24
console.log(toQueryString({
name : 'xesam',
age : [24,25,26]
})); //name=xesam&age=24&age=25&age=26

真实源码中用的是inject方法，不过在Enumerable部分，因此上面作了替换。