[JavaScript] encodeURI

Published: 2017-02-03 by 놀이터흙이제맛

• Categories:
• javascript 40

• Tags:
• ecmascript 39
• encodeuri 1
• javascript 80
• querystring 1

• URI 인코딩이란
• 변환 테스트
• encodeURI()와 encodeURIComponent()의 차이
• 번외: 브라우저 주소창에 보이는 문자 그대로 복사하기

참고 문서

• URI Generic Syntax RFC 2396
• UTF-8 encoding table and Unicode characters
• HTTP/1.1 RFC 2616
• 하이퍼텍스트 전송규약 1.1 표준안
• w3schools: HTML URL Encoding Reference
• ASCII | 위키백과
• 유니코드 A000~AFFF | 위키백과
• 유니코드 B000~BFFF | 위키백과
• 유니코드 C000~CFFF | 위키백과
• 유니코드 D000~DFFF | 위키백과

URI 인코딩이란

https://www.google.co.kr/search?q=%ED%95%9C%EA%B8%80

위에서 %ED%95%9C%EA%B8%80는 '한글'을 의미한다. 이것은 HTTP 스펙에 따른 변환으로, '한글'을 UTF-8로 인코딩한 뒤 바이트마다 앞에 '%'를 붙여준 값이다. ('한글'은 유니코드 포인트로 U+D55C U+AE00이며, UTF-8 인코딩의 16진수 표현으로는 ed 95 9c ea b8 80이다.)

변환 테스트

encodeURI()와 encodeURIComponent()의 차이

자바스크립트는 encodeURI()와 encodeURIComponent() 함수를 제공한다. 둘의 차이점은 다음과 같다:

encodeURI('?a=b&c=d');  // "?a=b&c=d"
encodeURIComponent('?a=b&c=d');  // "%3Fa%3Db%26c%3Dd"

encodeURIComponent()는 인수를 querystring의 일부라고 간주한다. 따라서 =, ?, &를 인코딩한다. 반면 encodeURI()는 인수를 URI 전체라고 간주하며 파라미터 구분자인 =, ?, &를 인코딩하지 않는다.

번외: 브라우저 주소창에 보이는 문자 그대로 복사하기

가령 주소가 https://ko.wikipedia.org/wiki/프로토타입_기반_프로그래밍인 사이트에 접속 중일 때, 브라우저에서 주소창을 그대로 복사하면 클립보드에는 https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%EA%B8%B0%EB%B0%98_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D 이렇게 저장된다. 만약 보이는 그대로 복사하고 싶다면 주소의 맨 앞에 스페이스바를 한 칸 넣고 복사하면 된다.