URL からパラメータを抽出し、オブジェクトを URL クエリに変換するための実装コード パラメータ_JavaScript スキル

1. URL からパラメータを抽出します

には次の文字列があります:

var linkURL = 'http://localhost:8080/String/string_6.html?nickname=小西山子&age=24 # id1';
実際の URL アドレスの場合、js を使用してその場所の関連情報を読み取ることができます。

をコピーします。コード コードは次のとおりです:

location.origin: http://localhost[domain]
location.pathname: /project_js/Javascript/js_basic /demo /String/string_6.html [URL パス]
location.host : localhost [ホスト ポート]
location.hostname : localhost [ホスト名]
location.port : [ポート]
location .search : ?name=xesam【クエリ文字列】
location.hash : #age【アンカー】
location.href : http://localhost/project_js/Javascript/js_basic/demo/String/string_6.html? name=xesam#age[完全形式]
location.protocol: http[プロトコル]

このうち、location.search は主に URL からパラメータを抽出するために使用されます。ただし、一般性を高めるため、location.search を読み取って文字列を直接処理することはありません。

文字列クエリ文字列を抽出した後、それをオブジェクトの形式に変換します。

まず、いくつかのクエリ文字列の状況について説明します:

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

(2)?ニックネーム&age=24#id1'; -->{ニックネーム:未定義,年齢:'24'}

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

(4)? Nickname=小西山子=Another&age=24&age=24#id1 -->{ニックネーム: 'Xiaoxi Shanzi=もう一人', age:['24','24']}

コードをコピー コードは次のとおりです:

function toQueryParams(){
var search = this.replace(/^s /,'').replace(/s $/,'').match(/([^ ?#]*)( #.*)?$/);//location.search の「?」以降を抽出
if(!search){
return {};
var searchStr = search[ 1];
var searchHash = searchStr.split('&');

var ret = {};
for(var i = 0, len = searchHash.length; i var par = searchHash[i]
if((pair = par.split('='))[0]){
var key = decodeURIComponent(pair.shift());
var 値 = par.join('=') :
console.log()
if(値 != 未定義){
値 = decodeURIComponent(値);
}
if(ret のキー){
if(ret[key].constructor != 配列) {
ret [キー] = [ret[キー]];
ret[キー].push(値);
ret[キー] = 値; >}
}
return ret;
}
console.dir(toQueryParams.call(linkURL));


上記は基本的にプロトタイプにあるものですtoQueryParams の実装では、上記の別の手順では、「=」を使用してパラメータを分割し、それらを値で結合します。さらに、部分文字列を使用して次のことを実現できます。

コードをコピー

コードは次のとおりです: function toQueryParams(){ var search = this.replace(/^s /,'').replace(/s $/,'').match(/([^?#]*)(#. *)?$/) ; if(!search){

return {};

var searchStr = search[1]; ');

var ret = {};
searchHash.forEach(function(pair){
var temp = '';
if(temp = (pair.split('= ',1))[ 0]){
var キー = decodeURIComponent(temp);
var 値 = ペア.substring(key.length 1);
if(値 != 未定義); >value = decodeURIComponent(value );
}
if(ret のキー){
if(ret[key].constructor != Array){
ret[key] = [ret[key] ]];
}
ret[key].push(value);
ret[key] = value;
return ret;
}
console.dir(toQueryParams.call(linkURL));



1. オブジェクトを URL クエリ パラメーターに変換します。 > オブジェクトを URL クエリに変換する パラメータは少し面倒です。ただし、クエリパラメータ形式に変換されるため、単一層のネストされたオブジェクトのみを処理でき、サブオブジェクトは処理できません。原理は toQueryParams の逆の操作です。




コードをコピー


コードは次のとおりです:

function toQueryPair(key, value) {
if (typeof value == 'unknown'){
return key;
}
return key '=' encodeURIComponent(value === null ? '' : String(value));
}
関数 toQueryString(obj) {
var ret = [];
for(obj の var key){
key = encodeURIComponent(key);
var 値 = obj[キー];
if(values && value.constructor == Array){//数组
var queryValues = [];
for (var i = 0, len = value.length, value; i value = value[i];
queryValues.push(toQueryPair(key, value));
}
ret = ret.concat(queryValues);
}else{ //文字串
ret.push(toQueryPair(key,values));
}
}
return ret.join('&');
}
console.log(toQueryString({
名前 : 'xesam',
年齢 : 24
})); //name=xesam&age=24
console.log(toQueryString({
name : 'xesam',
age : [24,25,26]
})); //name=xesam&age=24&age=25&age=26

真のソース コードで使用されるのは、Enumerable 部分ではない inject メソッドであるため、上に置き換えられています。