Membuat HTML Encoder & Decoder dengan Javascript

Fungsi : Men-encode / men-decode sebuah atau beberapa baris code.

Tingkat kesulitan : Mudah.

Penggunaan : Manual.

Bahasa Pemrograman : CSS, HTML, dan Javascript.

File Eksternal : -

Source Code : -

HTML

<textarea id="input" placeholder="Tulis/paste kode di sini lalu klik 'Encode' atau 'Decode'" rows="10"></textarea>
<div>
  <div class="button-wrapper">
  <button id="encode">Encode</button>
  <button id="decode">Decode</button>
  <button id="clearstyles">Bersihkan</button>
</div>
<textarea name="output" id="output" placeholder="Copy hasil Encode atau Decode disini" rows="10"></textarea>

CSS

#input, #output{width:100%;border:0;background:#ddd;padding:15px;color:#222;font-size:14px;}
.button-wrapper{margin:1.5em auto;display:block;text-align:center;}
#encode, #decode, #clearstyles{background:#9c88ff;color:#fff;border:2px solid transparent;padding:10px 15px;margin:0 5px;border-radius:3px;box-shadow:0 3px 10px rgba(0,0,0,.1);cursor:pointer;transition:.2s ease-in-out}
#encode:hover, #decode:hover, #clearstyles:hover{background:#fff;border:2px solid #9c88ff;color:#9c88ff;}

Javascript

<script type="text/javascript">
var encode = document.getElementById("encode");
var decode = document.getElementById("decode");
var input = document.getElementById("input");
var output = document.getElementById("output");
var clearstyles = document.getElementById("clearstyles");

encode.addEventListener("click", function() {
  output.value = encodeString(input.value);
  output.focus();
  output.select();
});

decode.addEventListener("click", function() {
  output.value = decodeString(input.value);
  output.focus();
  output.select();
});

clearstyles.addEventListener("click", function() {
  input.value = '';
  output.value = '';
  input.focus();
});

function encodeString(string) {
  return string
    .replace(/&?&/g, "&")
    .replace(/"/g, """)
    .replace(/'/g, "'")
    .replace(/</g, "<")
    .replace(/>/g, ">")
}

function decodeString(string) {
  return string
    .replace(/"/g, "\"")
    .replace(/'/g, "'")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/&/g, "&")
}
</script>

Live PreviewSee on CodePen