it-box

텍스트 ↔ Unicode 변환기

텍스트와 Unicode를 서로 변환합니다.

텍스트 ↔ Unicode 변환기 도구 열기

문자열을 글자마다 HTML 숫자 문자 참조(&#번호;)로 바꾸고, 다시 원래 문자로 되돌립니다.

사용 순서

  1. 입력 칸에 텍스트를 넣으면 각 글자가 &#번호; 형식으로 바뀝니다.
  2. 결과를 HTML이나 템플릿에 넣으면 브라우저가 원래 글자로 보여줍니다.
  3. 아래 칸에 &#번호; 형식의 문자열을 넣으면 텍스트로 복원됩니다.
  4. 결과 옆의 복사 버튼으로 값을 가져갑니다.

예시

Hello는 Hello가 되고, 반대로 Hi는 Hi로 복원됩니다.

한계

10진수 참조만 복원하며 H 같은 16진수 참조와 & 같은 이름 참조는 처리하지 않습니다. 이모지처럼 자바스크립트에서 UTF-16 대리쌍으로 저장되는 글자는 참조 두 개로 나옵니다. 예를 들어 😀는 ��가 됩니다. 입력을 글자 단위로 나누므로 공백도  로 바뀝니다.

보안 주의

복원 결과에는 < 와 " 같은 문자가 그대로 나오므로, 이 값을 innerHTML에 넣으면 스크립트가 실행될 수 있습니다. 복원한 텍스트를 페이지에 넣을 때는 텍스트 노드로 넣으세요.

배경 지식

HTML 숫자 문자 참조는 &# 뒤에 유니코드 번호를 쓰고 세미콜론으로 닫는 표기입니다. 키보드로 치기 어려운 기호를 ASCII 문자만으로 전달할 수 있어서, 문자 인코딩이 불확실한 옛 웹 페이지와 메일 템플릿에서 많이 쓰였습니다. 지금도 템플릿 엔진이나 오래된 CMS 데이터에는 이런 참조가 남아 있는 경우가 많습니다.

유니코드 번호는 각 문자에 붙은 고유 번호입니다. A는 65, 한글 가는 44032입니다. 이 도구는 자바스크립트 문자열의 UTF-16 코드 단위를 기준으로 번호를 붙이므로 0xFFFF를 넘는 글자는 두 개의 대리쌍 번호로 나뉩니다. 이모지를 보면 번호가 두 개씩 나오는 이유입니다.

숫자 문자 참조는 HTML 본문에서 글자로 해석됩니다. 속성 값, 스크립트, URL 안에서는 브라우저가 다르게 처리할 수 있으므로 넣을 위치에 맞는 인코딩 규칙을 따라야 합니다. 복원 결과를 다시 HTML에 쓸 때는 정제 단계를 거치는 것이 일반적입니다. 사용자 입력을 참조로 바꿔 저장한 뒤 다시 풀어 쓰는 흐름이라면 원래 값과 다른 결과가 나오지 않는지 점검하세요.

자주 묻는 질문

&#번호;와 &amp; 같은 이름 참조는 무엇이 다른가요?

&#번호;는 유니코드 번호로 글자를 지정하고, &amp;는 &, &lt;는 <처럼 이름으로 지정합니다. 자주 쓰는 기호는 이름 참조가 읽기 쉽고, 나머지 글자는 번호 참조가 편합니다.

이모지를 복원하면 원래대로 나오나요?

네, 두 번호를 함께 복원하므로 원래 이모지가 나옵니다. 다만 이 도구는 글자 수를 세지 않으므로 결과 문자열의 길이는 JavaScript 기준으로 2가 됩니다.

한글을 전부 참조로 바꾸면 파일이 얼마나 커지나요?

한글 한 글자는 &#54620;처럼 8자가 되어 원래 글자보다 크게 늘어납니다. 긴 문서를 이렇게 바꾸면 파일이 커지므로 보통은 UTF-8 인코딩을 쓰고 참조는 특수한 경우에만 쓰세요.