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[Protocol]

그 중 location.search는 주로 URL에서 매개변수를 추출하는 데 사용됩니다. 그러나 일반성을 위해 location.search를 읽지 않고 문자열을 직접 처리합니다.

문자열 쿼리 문자열을 추출한 후 객체 형태로 변환합니다.

먼저 몇 가지 쿼리 문자열 상황에 대해 논의합니다.

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

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

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

(4)? Nickname=小西山子=다른&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 < len ; i ){ //여기에서 각 메소드를 호출할 수 있습니다.
var pair = searchHash[i]
if((pair = pair.split('='))[0]){
var key = decodeURIComponent(pair.shift());
var value = pair.length > ? pair.join('=') : pair[0]
console.log()
if( 값 != 정의되지 않음){
값 = decodeURIComponent(값);
}
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));


위 내용은 기본적으로 Prototype에 있는 내용입니다. toQueryParams 구현에서 위의 또 다른 단계는 '='를 사용하여 매개변수를 분할한 다음 값으로 연결하는 것입니다. 또한 하위 문자열을 사용하여 다음을 달성할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 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 != undefine); >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. 객체를 URL 쿼리 매개변수로 변환

개체를 URL 쿼리로 변환 매개변수는 좀 더 까다롭습니다. 하지만 쿼리 매개변수 형태로 변환되기 때문에 단일 레이어 중첩 개체만 처리할 수 있고, 하위 개체는 처리할 수 없습니다. 원칙은 toQueryParams의 역연산입니다.

코드 복사

코드는 다음과 같습니다.

function toQueryPair(key, value) {
if (typeof value == 'undefine'){
return key;
}
반환 키 '=' encodeURIComponent(value === null ? '' : String(value));
}
function toQueryString(obj) {
var ret = [];
for(var key in obj){
key = encodeURIComponent(key);
var 값 = obj[key];
if(values ​​&& value.constructor == Array){//数组
var queryValues ​​= [];
for (var i = 0, len = 값.길이, 값; i 값 = 값[i];
queryValues.push(toQueryPair(키, 값));
}
ret = ret.concat(queryValues);
}else{ //字符串
ret.push(toQueryPair(key, value));
}
}
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

真实源码中用 是inject method ， 不过在 Enumerable PART分 ， 因此上面 作了替换。