URL 인코딩
브라우저 안에서만 처리됩니다. 입력한 내용과 선택한 파일은 서버로 전송되지 않습니다.
encodeURIComponent
값 하나를 URL 에 끼워 넣을 때. 검색어, 파라미터 값, 경로 조각. 대부분 이것
encodeURI
이미 완성된 URL 전체를 다듬을 때. 구분자(? & / #)를 살려 둡니다.
RFC 3986 엄격
encodeURIComponent 가 남겨 두는 ! ' ( ) * 까지 인코딩합니다. OAuth 서명처럼 표준을
그대로 따라야 할 때.
두 함수는 정확히 이 열한 글자에서 갈립니다
encodeURI 는 그대로 두고 encodeURIComponent 는 인코딩합니다. 전부 URL 의 구분자라서, 값 안에 들어가면 반드시 인코딩돼야 하고 URL 전체에서는 그대로 있어야 합니다.
| 글자 | 인코딩되면 | URL 에서 하는 일 |
|---|---|---|
| # | %23 | 프래그먼트(문서 안 위치) 시작 |
| $ | %24 | 일부 API 의 예약 문자 |
| & | %26 | 쿼리 파라미터 구분 |
| + | %2B | 쿼리에서 공백을 뜻함 |
| , | %2C | 경로·값 구분자로 쓰임 |
| / | %2F | 경로 구분 |
| : | %3A | 스킴·포트 구분 |
| ; | %3B | 경로 파라미터 구분 |
| = | %3D | 파라미터 이름과 값 구분 |
| ? | %3F | 쿼리 시작 |
| @ | %40 | 사용자 정보와 호스트 구분 |
디코딩 결과
인코딩된 문자열을 입력하면 여기에 결과가 나옵니다.
파라미터
URL 을 입력하면 파라미터를 표로 보여 줍니다.
사용법
- 맨 위 칸에 인코딩할 값을 넣으면 encodeURIComponent · encodeURI · RFC 3986 세 결과가 한 번에 나옵니다. 각 카드에 언제 그것을 써야 하는지 적혀 있습니다.
- 가운데 칸에 인코딩된 문자열을 넣으면 되돌립니다. 쿼리 문자열에서 가져온 것이면 "+ 를 공백으로 읽기" 를 켜세요.
- 맨 아래 칸에 URL 전체를 붙여넣으면 쿼리 파라미터를 표로 풀어 줍니다. 같은 이름이 여러 번 나오는 것도 전부 보여 줍니다.
자주 묻는 질문
encodeURIComponent 와 encodeURI 중 무엇을 써야 하나요?
값 하나를 URL 에 끼워 넣을 때는 encodeURIComponent 입니다(검색어, 파라미터 값, 경로 조각). 이미 완성된 URL 전체를 다듬을 때만 encodeURI 를 씁니다. 둘은 정확히 열한 글자(# $ & + , / : ; = ? @)에서 갈리고, 전부 URL 의 구분자입니다. 값 안에 `&` 나 `=` 가 있는데 encodeURI 를 쓰면 그 값이 여러 파라미터로 쪼개져 버리는 것이 가장 흔한 사고입니다. 도구 안에 그 열한 글자를 표로 적어 두었습니다.
`+` 와 `%20` 은 어떻게 다른가요?
둘 다 공백을 뜻할 수 있지만 자리에 따라 다릅니다. 쿼리 문자열(`?a=b`)에서는 폼 전송 규약(application/x-www-form-urlencoded) 때문에 `+` 가 공백으로 읽히지만, 경로(`/a/b`)에서는 `+` 가 그냥 더하기 기호입니다. `%20` 은 어디서든 공백입니다. 진짜 더하기 기호를 쿼리에 넣으려면 `%2B` 로 써야 합니다. 그래서 디코딩 칸에 "+ 를 공백으로 읽기" 를 켜고 끌 수 있게 두었고, 쿼리 표에서는 `+` 가 들어 있는 값에 표시를 답니다.
RFC 3986 엄격 모드는 뭔가요?
encodeURIComponent 는 `!`, `'`, `(`, `)`, `*` 다섯 글자를 인코딩하지 않는데 RFC 3986 은 이들을 예약 문자로 봅니다. 평소에는 문제가 없지만 OAuth 1.0 서명처럼 양쪽이 정확히 같은 문자열을 만들어야 하는 곳에서는 어긋납니다. 그럴 때 쓰라고 세 번째 카드를 두었습니다.
한글이 %EC%95%88 처럼 세 덩어리로 나오는데 맞나요?
맞습니다. 퍼센트 인코딩은 글자가 아니라 바이트를 인코딩하고, 한글 한 글자는 UTF-8 로 3바이트입니다. 그래서 한 글자에 `%XX` 가 세 개 나옵니다. 디코딩할 때는 이어진 퍼센트 시퀀스를 한 덩어리로 모아 해석하므로 정확히 되돌아옵니다.
디코딩이 실패하면 어디가 문제인지 알 수 있나요?
몇 번째 글자가 문제인지 알려 줍니다. 브라우저의 decodeURIComponent 는 "URI malformed" 라고만 말하고 위치를 알려 주지 않아서 긴 URL 에서는 그것만으로 고칠 수 없습니다. `%` 뒤에 16진수가 아닌 것이 온 경우와, 바이트는 맞지만 UTF-8 이 아닌 경우(옛 EUC-KR URL)를 구분해 설명합니다.