본문 바로가기
Coding/Etc

자바스크립트 URL/Base64/Hex Encoding, Decoding

by Hide­ 2017. 2. 18.
반응형



//url encoding

function urlenc() {

var str = document.getElementById("url").value;

var ret = encodeURIComponent(str);

document.getElementById("url").value = ret;

}

//url decoding

function urldec() {

var str = document.getElementById("url").value;

var ret = decodeURIComponent(str);

document.getElementById("url").value = ret;

}

//base64 encoding

function base64enc() {

var str = document.getElementById("base64").value;

document.getElementById("base64").value = window.btoa(unescape(encodeURIComponent(str)));

}

//base64 decoding

function base64dec() {

var str = document.getElementById("base64").value;

document.getElementById("base64").value = decodeURIComponent(escape(window.atob(str)));

}

//hex decoding

function hexdec() {

    var hex = document.getElementById("hex").value.toString();

    var str = '';

    for (var i = 0; i < hex.length; i += 2)

        str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));

    document.getElementById("hex").value = str;

}

//hex encoding

function hexenc() {

    var str = document.getElementById("hex").value.toString();

    var hex = "";

    for(var i=0;i<str.length;i++) {

        hex += ''+str.charCodeAt(i).toString(16);

    }

    document.getElementById("hex").value = hex;

}


함수부분이고 인자나 return값은 알아서 조절..

아래는 풀소스


<html>

<head>

<script>

function urlenc() {

var str = document.getElementById("url").value;

var ret = encodeURIComponent(str);

document.getElementById("url").value = ret;

}

function urldec() {

var str = document.getElementById("url").value;

var ret = decodeURIComponent(str);

document.getElementById("url").value = ret;

}

function base64enc() {

var str = document.getElementById("base64").value;

document.getElementById("base64").value = window.btoa(unescape(encodeURIComponent(str)));

}

function base64dec() {

var str = document.getElementById("base64").value;

document.getElementById("base64").value = decodeURIComponent(escape(window.atob(str)));

}


function hexdec() {

    var hex = document.getElementById("hex").value.toString();

    var str = '';

    for (var i = 0; i < hex.length; i += 2)

        str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));

    document.getElementById("hex").value = str;

}


function hexenc() {

    var str = document.getElementById("hex").value.toString();

    var hex = "";

    for(var i=0;i<str.length;i++) {

        hex += ''+str.charCodeAt(i).toString(16);

    }

    document.getElementById("hex").value = hex;

}

</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body>

<div class="container">

<div class="jumbotron">

<h1>Online Encoder/Decoder</h1> 

<p>URL / Base64 / Hex</p> 

</div>

<div class="form-group">

<label for="comment">URL</label>

<textarea class="form-control" rows="5" id="url"></textarea>

<button type="button" class="btn btn-default" id="urlen" onclick="urlenc()">Encode</button>

<button type="button" class="btn btn-default" id="urlde" onclick="urldec()">Decode</button>

</div>

<div class="form-group">

<label for="comment">Base64</label>

<textarea class="form-control" rows="5" id="base64"></textarea>

<button type="button" class="btn btn-default" id="baseen" onclick="base64enc()">Encode</button>

<button type="button" class="btn btn-default" id="basede" onclick="base64dec()">Decode</button>

</div>

<div class="form-group">

<label for="comment">Hex</label>

<textarea class="form-control" rows="5" id="hex"></textarea>

<button type="button" class="btn btn-default" id="hexen" onclick="hexenc()">Encode</button>

<button type="button" class="btn btn-default" id="hexde" onclick="hexdec()">Decode</button>

</div>

</div>

</body>

</html>