URL 인코딩·디코딩
양방향 퍼센트 인코딩. encodeURIComponent와 encodeURI 차이도 같이 보여 줍니다.
두 범위가 다르게 다루는 문자
사용 방법
- 텍스트나 URL을 붙여넣으면 결과가 바로 나옵니다.
- 인코딩과 디코딩은 토글로 바꾸고, 화살표 버튼을 누르면 결과가 입력칸으로 돌아갑니다.
- 값 하나는 값 한 개를 감싸고, URL 전체는 / ? & = # 을 그대로 둡니다.
예시
검색어에 한글이 들어갈 때
한글을 인코딩하면 %ED%95%9C%EA%B8%80입니다. 글자마다 3바이트인데, 텍스트를 UTF-8로 바꾼 뒤 바이트마다 %XX로 적기 때문입니다.
링크가 깨지는 경우
값에 &가 있으면 쿼리스트링이 둘로 쪼개집니다. 값 하나 모드는 %26으로 바꿔서 링크를 살리고, URL 전체 모드는 구분자로 그냥 둡니다.
%20이 잔뜩 붙은 주소
디코딩하면 읽을 수 있는 글자로 돌아옵니다. 중간이 잘린 주소라면 엉뚱한 결과를 보여 주지 않고 잘못됐다고 알려 줍니다.
인코딩과 로마자 표기는 다릅니다
퍼센트 인코딩은 한글을 한글로 둡니다. 홍길동을 Hong Gildong으로 바꾸는 건 다른 일입니다. 한글 로마자 변환기
자주 묻는 질문
encodeURIComponent와 encodeURI 중 뭘 써야 하나요?
URL 안에 들어가는 조각 하나라면 값 하나입니다. 쿼리 값, 경로 한 칸, 해시 같은 것들이요. 이미 완성한 주소 전체라면 URL 전체를 쓰세요. URL을 붙잡아 주는 / ? & = # : 을 건드리지 않습니다.
입력한 글이 어디로 전송되나요?
아니요. 인코딩과 디코딩 모두 브라우저에서 처리하고 업로드하거나 기록하지 않습니다.
한글 한 글자가 왜 아홉 글자가 되나요?
URL에는 ASCII만 담을 수 있어서, 글자를 UTF-8로 바꾼 뒤 바이트마다 %XX로 적습니다. 한글 음절은 대개 3바이트라 %XX 세 묶음이 됩니다.
디코딩이 실패한다고 나옵니다
퍼센트 인코딩 형식이 아니라는 뜻입니다. % 하나만 떨어져 있거나, %ZZ처럼 엉뚱한 짝이거나, 복사하다 끊겨서 바이트가 모자란 경우입니다. 문자열 끝부터 확인해 보세요.
폼 URL의 + 기호는요?
폼 전송에서는 +가 공백을 뜻하지만, 경로에서는 그냥 플러스입니다. 쿼리스트링을 디코딩할 때만 옵션을 켜세요.
Base64와 같은 건가요?
다릅니다. 퍼센트 인코딩은 글자를 URL 안에서 안전하게 만들면서 읽을 수 있게 두고, Base64는 바이트를 다른 알파벳으로 다시 씁니다. 목적도 결과도 다릅니다.