본문 바로가기
C++ 200제/코딩 IT 정보

[JavaScript] 문자열 <-> UTF8, UTF16 진수 한글 변환 (HEX to string)

by vicddory 2019. 12. 14.

일본은 영어권 국가가 아니라 문자열 진수 변환 방법이 우리나라랑 똑같습니다. 일본 프로그래머가 올려놓은 글 소개할게요.

저는 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 확인 방법 (타입스크립트)

JavaScript Array to Object 변환 3가지 방법

javascript 형태: date format을 JSON 포맷으로

댓글