[javascript] URL 매개 변수를 인코딩하는 방법은 무엇입니까?

Program / 글쓴이

다음과 같은 URL에 매개 변수를 전달하려고합니다.

http://www.foobar.com/foo?imageurl=

그리고 다른 API에 의해 자체적으로 생성 된 이미지 URL과 같은 매개 변수를 전달하고 싶습니다. 이미지에 대한 링크는 다음과 같습니다.

http://www.image.com/?username=unknown&password=unknown

그러나 URL을 사용하려고 할 때 :

http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown

작동하지 않습니다.

나는 또한 사용 encodeURI()하고 encodeURIComponent()imageURL에서 시도했지만 그것도 작동하지 않습니다.

답변

PHP 사용

echo urlencode("http://www.image.com/?username=unknown&password=unknown");

결과

http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown

자바 스크립트 사용 :

var myUrl = "http://www.image.com/?username=unknown&password=unknown";
var encodedURL= "http://www.foobar.com/foo?imageurl=" + encodeURIComponent(myUrl);

데모 : http://jsfiddle.net/Lpv53/

답변

새로운 ES6을 사용하면 Object.entries()약간의 중첩 된 map/ join:

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

console.log("https://example.com/endpoint?" + encodeGetParams(params))

스 니펫 확장

답변

encodeURIComponent()또는을 사용해서는 안됩니다 encodeURI(). MDN 문서에 따라 fixedEncodeURIComponent()및을 사용해야합니다 fixedEncodeURI().

에 관하여 encodeURI()…

URL에 대한 최신 RFC3986을 따르고 자하는 경우 (IPv6의 경우) 대괄호가 예약되어 URL (예 : 호스트)의 일부가 될 수있는 항목을 구성 할 때 인코딩되지 않는 경우 다음 코드 조각이 도움이 될 수 있습니다.

function fixedEncodeURI(str) {
return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
}

에 관하여 encodeURIComponent()…

RFC 3986 (!, ‘, (,) 및 * 예약)을 더 엄격하게 준수하려면 이러한 문자에 형식화 된 URI 구분 용도가 없더라도 다음을 안전하게 사용할 수 있습니다.

function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
return '%' + c.charCodeAt(0).toString(16);
});
}

그렇다면 차이점은 무엇입니까? fixedEncodeURI()와 fixedEncodeURIComponent()동일한 값 세트를 변환하지만, fixedEncodeURIComponent()이 세트를 변환합니다 +@?=:*#;,$&. 이 세트는 GET매개 변수 ( &, +등), 앵커 태그 ( #), 와일드 카드 태그 ( *), 이메일 / 사용자 이름 부분 ( @) 등에 사용됩니다.

예를 들어 – 당신이 사용하는 경우 encodeURI(), user@example.com/?email=me@home제대로 초를 전송하지 않습니다 @(크롬 자연스럽게 종종처럼) 호환성을 처리 브라우저를 제외하고, 서버에.

답변