티스토리 뷰
[JavaScript] 문자열 <-> UTF8, UTF16 진수 한글 변환 (HEX to string)
vicddory 2019. 12. 14. 12:05목차
일본은 영어권 국가가 아니라 문자열 진수 변환 방법이 우리나라랑 똑같습니다. 일본 프로그래머가 올려놓은 글 소개할게요.
저는 Vus js 기반에서 이 자바스크립트 소스를 이용해 편안하게 잘 사용하고 있습니다.
또한, 변경한 hex 데이터를 array 또는 object로 사용하고 싶다면 아래 글을 추가로 참조하시면 되겠습니다.
prototype001.js --- UTF8⇔16 진수 문자열 변환 Javascript
// 문자열을 UTF8 16 진수 문자열로 변환
function string_to_utf8_hex_string(text)
{
var bytes1 = string_to_utf8_bytes (text);
var hex_str1 = bytes_to_hex_string (bytes1);
return hex_str1;
}
// UTF8 16 진수 문자열을 문자열로 변환
function utf8_hex_string_to_string(hex_str1)
{
var bytes2 = hex_string_to_bytes (hex_str1);
var str2 = utf8_bytes_to_string (bytes2);
return str2;
}
// 문자열을 UTF8 바이트 배열로 변환
function string_to_utf8_bytes(text)
{
var result = [] ;
if (text == null )
return result;
for ( var i = 0; i <text.length; i ++) {
var c = text.charCodeAt (i);
if (c <= 0x7f) {
result.push (c);
} else if (c <= 0x07ff) {
result.push (((c >> 6) & 0x1F) | 0xC0);
result.push ((c & 0x3F) | 0x80);
} else {
result.push (((c >> 12) & 0x0F) | 0xE0);
result.push (((c >> 6) & 0x3F) | 0x80);
result.push ((c & 0x3F) | 0x80);
}
}
return result;
}
// 바이트 값을 16 진수 문자열로 변환
function byte_to_hex(byte_num)
{
var digits = (byte_num).toString (16);
if (byte_num <16)
return '0' + digits;
return digits;
}
// 바이트 배열을 16 진수 문자열로 변환
function bytes_to_hex_string(bytes)
{
var result = "" ;
for ( var i = 0; i <bytes.length; i ++) {
result + = byte_to_hex (bytes[i]);
}
return result;
}
// 16 진수 문자열을 바이트 값으로 변환
function hex_to_byte(hex_str)
{
return parseInt(hex_str 16);
}
// 바이트 배열을 16 진수 문자열로 변환
function hex_string_to_bytes(hex_str)
{
var result = [] ;
for ( var i = 0; i <hex_str.length; i + = 2) {
result.push (hex_to_byte (hex_str.substr (i, 2)));
}
return result;
}
// UTF8 바이트 배열을 문자열로 변환
function utf8_bytes_to_string(arr)
{
if (arr == null)
return null;
var result = "";
var i;
while (i = arr.shift()) {
if (i <= 0x7f) {
result += String.fromCharCode(i);
} else if (i <= 0xdf) {
var c = ((i & 0x1f) << 6);
c += arr.shift() & 0x3f;
result + = String.fromCharCode(c);
} else if (i <= 0xe0) {
var c = ((arr.shift () & 0x1f) << 6) | 0x0800;
c += arr.shift() & 0x3f;
result += String.fromCharCode(c);
} else {
var c = ((i & 0x0f) << 12);
c += (arr.shift() & 0x3f) << 6;
c += arr.shift() & 0x3f;
result += String.fromCharCode(c);
}
}
return result;
}
그리고 위 소스 코드를 테스트할 HTML입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="prototype001.js"></script>
<script language="JavaScript">
<!--
function test01(){
alert('오늘은 날씨가 좋습니다');
}
function test02(){
var bytes = string_to_utf8_bytes('오늘은 날씨가 좋습니다');
alert(eval(bytes));
}
function test03(){
var bytes = string_to_utf8_bytes('오늘은 날씨가 좋습니다');
alert(bytes_to_hex_string(bytes));
}
function test04(){
var bytes1 = string_to_utf8_bytes('오늘은 날씨가 좋습니다');
var hex_str1 = bytes_to_hex_string(bytes1);
var bytes2 = hex_string_to_bytes(hex_str1);
alert(eval(bytes2));
var str2 = utf8_bytes_to_string(bytes2);
alert(str2);
}
function test05(){
var hex_str1 = string_to_utf8_hex_string('오늘은 날씨가 좋습니다');
document.getElementById('hex_temp').innerHTML = hex_str1;
var str2 = utf8_hex_string_to_string(hex_str1);
alert(str2);
}
//-->
</script>
</head>
<body>
<a href="#" onClick="Javascript:test01();">試作ver001</a><br />
<a href="#" onClick="Javascript:test02();">試作ver002</a><br />
<a href="#" onClick="Javascript:test03();">試作ver003</a><br />
<a href="#" onClick="Javascript:test04();">試作ver004</a><br />
<a href="#" onClick="Javascript:test05();">試作ver005</a><br />
<br />
<span id="hex_temp"></span>
</body>
<html>
사용 방법은 이렇습니다.
string_to_utf8_hex_string() = 문자열을 UTF8, 16 진수 자바스크립트 문자열로 변환합니다.
예) '今日はいい天気です' → e4bb8ae697a5e381afe38184e38184e5a4a9e6b097e381a7e38199
utf8_hex_string_to_string() = UTF8, 16진수 문자열을 일반 문자열(string)로 변환합니다.
예) e4bb8ae697a5e381afe38184e38184e5a4a9e6b097e381a7e38199 → '今日はいい天気です'
만약 타입스크립트를 사용하신다면, 제가 변환한 소스 코드를 보시면 됩니다. eslint + typescript 여기를 클릭하세요.
관련 글
TypeScript null, undefined 확인 방법 (타입스크립트)