URL 인코딩에 encodeURI 또는 ​​encodeURIComponent를 사용해야합니까?


282

이 두 가지 방법 중 URL 인코딩에 사용해야하는 방법은 무엇입니까?



13
한 가지 큰 차이점은 다음 과 같이 encodeURI인코딩되지 않는다는 것입니다 /. encodeURIComponent("ac/dc")=> ac%2FdcencodeURI("ac/dc")=>ac/dc

이 도움이 될 수 있습니다 "encodeURIComponent() and encodeURI() encode a URI by replacing URL reserved characters with their UTF-8 encoding....They differ because encodeURI does not encode queryString or hash values...URLs do not allow many special characters, like spaces or slashes. However these special characters are part of life, so URL encoding was invented." 소스
user1063287

또한 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 라는 제목의 특정 섹션을 참조하십시오 encodeURIComponent differs from encodeURI as follows.
user1063287

답변:


324

실제로하고 싶은 것에 달려 있습니다.

encodeURI는 입력이 인코딩이 필요한 일부 문자를 가질 수있는 완전한 URI라고 가정합니다.

encodeURIComponent는 모든 것을 특별한 의미로 인코딩하므로 다음과 같은 URI 구성 요소에 사용합니다.

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

108

URL 구성 요소 (querystring 매개 변수)에 넣을 문자열을 인코딩하는 경우을 호출해야합니다 encodeURIComponent.

기존 URL을 인코딩하는 경우을 호출하십시오 encodeURI.


1
아약스를 사용하는 경우 PHP로 전달되는 URL을 어떻게 디코딩합니까?
Aditya Shukla

6
당신은하지 않습니다. 웹 서버는 자동으로 수행합니다.
Quentin

@Aditya : 그것은 당신이하고있는 것에 달려 있습니다.
SLaks

@ slaks. get을 통해 매개 변수를 전달하므로 PHP에서 매개 변수를 검색하려고합니다.
Aditya Shukla

2
잘. 웹 서버 가 그렇게 할 것이라고 말했을 때 조금 서두르 게 말했을 수도 있지만 양식 데이터를 읽는 데 사용하는 모든 라이브러리가이를 처리합니다.
Quentin

47

xkr.us 는 예제와 함께 훌륭한 토론을합니다. 요약을 인용하려면 :

escape () 메소드는 서버 측의 공백으로 해석되고 필드에 공백이있는 양식에 의해 생성되는 + 문자를 인코딩하지 않습니다. 이 단점과이 함수가 비 ASCII 문자를 올바르게 처리하지 못하기 때문에 가능할 때마다 escape ()를 사용하지 않아야합니다. 가장 좋은 대안은 일반적으로 encodeURIComponent ()입니다.

escape ()는 다음을 인코딩하지 않습니다 : @ * / +

encodeURI () 메소드는 URL의 일부인 querystring과 반대로 URI를 인코딩한다는 점에서 escape ()보다 약간 더 전문화되어 있습니다. URI를 사용하고 특정 문자를 인 코드하지 않고 유지해야하는 자원에 사용할 문자열을 인코딩해야하는 경우이 방법을 사용하십시오. 이 메소드는 URI 내의 유효한 문자이므로 '문자를 인코딩하지 않습니다.

encodeURI ()는 인코딩하지 않습니다 : ~! @ # $ & * () = : /,;? + '

마지막으로, 대부분의 경우 URI의 단일 구성 요소를 인코딩 할 때 encodeURIComponent () 메소드를 사용해야합니다. 이 메소드는 일반적으로 URI의 특수 문자로 인식되는 특정 문자를 인코딩하여 많은 구성 요소가 포함될 수 있습니다. 이 메소드는 URI 내의 유효한 문자이므로 '문자를 인코딩하지 않습니다.

encodeURIComponent ()는 인코딩하지 않습니다 : ~! * () '


최근에 배웠다. TOMCAT 9 서버는 URL로 보낼 수있는 것에 대해 더 구체적입니다. encodeURIComponent ()는 인코딩해야 할 항목에 "공백"이있는 경우 더 잘 작동하는 것으로 보입니다. Tomcat 8은 신경 쓰지 않았지만 9는 더 구체적입니다.
Aggie Jon의 87

다른 말로 encodeURI하면 파일 이름을 URL로 변환하려고하는데 파일 이름이있는 경우 실패 #합니다
gman

17

다음은 요약입니다.

  1. escape ()는 @ * _ +-를 인코딩하지 않습니다. /

    사용하지 마십시오.

  2. encodeURI ()는 AZ az 0-9를 인코딩하지 않습니다. , /? : @ & = + $-_. ! ~ * '() #

    입력이 ' https://searchexample.com/search?q=wiki ' 와 같은 완전한 URL 일 때 사용하십시오.

  3. encodeURIComponent ()는 AZ az 0-9-_를 인코딩하지 않습니다. ! ~ * '() 입력이 완전한 URL의 일부인 경우에 사용하십시오. 예 : const queryStr = encodeURIComponent(someString)

1
이것은 그들이하는 일을 정확하게 알려주기 때문에 훌륭한 대답입니다. 그러나 나는 언제 사용 해야하는지에 대해 여전히 의문을 가지고 있습니다. 내 URI 구성 요소가 완전한 URL이면 어떻게 되나요? 그런 다음 위의 규칙 2 또는 규칙 3을 사용하거나 encodeURIComponent (encodeURI (theCompleteURI))와 같은 두 가지 모두를 사용해야합니다
Panu Logic

10

encodeURIComponent () : 인수가 URI의 일부 (예 : 프로토콜, 호스트 이름, 경로 또는 쿼리 문자열) 인 것으로 가정합니다. 따라서 URI 부분을 구분하는 데 사용되는 문장 부호 문자를 이스케이프합니다.

encodeURI () : 기존 URL을 인코딩하는 데 사용됩니다


7

차이 사이 encodeURIencodeURIComponent:

encodeURIComponent(value)주로 queryString 매개 변수 값을 인코딩하는 데 사용되며의 모든 해당 문자를 인코딩합니다 value. encodeURI프로토콜 접두사 ( http://) 및 도메인 이름을 무시합니다 .


매우 드문 경우이지만 ! *다음 과 같은 추가 문자를 인코딩하기 위해 수동 인코딩을 구현하려는 경우 (일반적인 경우 인코딩 할 필요는 없지만) 다음 과 같이 사용할 수 있습니다.

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

( 소스 )


6
당신은 URL에서 그 문자를 탈출해서는 안됩니다.
Arashsoft

인용 된 문서에서 알 수 있듯이 "이 문자들은 형식화 된 URI 구분 용도가 없습니다"
caesarsol

@ caesarsol이므로 답변을 수정해야합니다. 인용 된 문서의 의미를 이해할 수 없기 때문에 귀하의 생각을 알려주십시오 ..
T.Todua

그 당신이 정상적인 URL 인코딩 사용 사례 : 밖으로 일을하지 않는 한, 이러한 문자를 인코딩 할 단지 쓸모
caesarsol

2

다른 답변은 목적을 설명합니다. 각 함수 가 실제로 변환 할 문자는 다음과 같습니다 .

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

위의 모든 문자는 퍼센트 16 진수 코드로 변환됩니다. 공백 %20, 퍼센트 %25, 등. 아래 문자는 변경되지 않습니다.

함수 가 변환하지 않는 문자는 다음과 같습니다 .

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

-4

일반적으로 사용 encodeURIComponent합니다. 그것이 더 구체적으로 사용된다고 생각하는 긴 이름을 두려워하지 마십시오. 저에게 가장 일반적으로 사용되는 방법입니다. 또한 encodeURI를 사용하여 테스트하지 않았으므로 제대로 인코딩 된 것 같습니다. 아마도 사용하려는 것이 아니며 이름 필드에서 "Fred"를 사용하는 간단한 테스트를 수행했지만 나중에 앰퍼샌드 또는 해시 태그 추가와 같은 고급 텍스트를 사용하면 실패합니다. 그 이유에 대한 다른 답변을 볼 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.