October 7, 2021

How to Encode and Decode String with Base64 in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to encode and decode string with base64 in javascript. The Base64 encoding converts binary data into an ASCII string format so that it could be easily transmitted over the network via email and HTML form data.

The base64 encoding consists of 64 basic ASCII characters and that includes letters, numbers, and special characters such as “+”, “\”, and “=”.

It is very common in web applications to encode binary data into base64 and use that as data URI. Such implementation is commonly done in the case of images to save bandwidth and reduce the load on the backend server.

Encoding and decoding string with base64 is super simple in javascript. There are 2 built-in methods to accomplish this. The btoa() method is used to encode binary data into an ASCII string.

The btoa stands for binary data to ASCII. The atob() method is used to decode base64 encode string and convert it into its binary data representation. The atob stands for ASCII to binary data.

Base64 encoding system is not limited to strings. You can also use it with various file types. You must have heard about data URI. It is nothing more than a base64 representation of a file. You can use online base64 to image converter tool to convert any base64 encoded image into its actual format.

In the following example, we have 2 buttons and one textarea. We will enter some random text in the textarea.

Upon click of a encode button, we will convert that text into a base64 encoded string and upon click of the decode button, we will convert that base64 encode string into a normal string. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, textarea, and button). The div element is just a wrapper for the button elements.
The first button element has “Encode” and the second button element has “Decode” as innerText.
We have done some basic styling by using style attribute of the div element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div style="margin-bottom: 20px;">
        <button id="encode">Encode</button>
        <button id="decode">Decode</button>
    </div>

    <textarea name="" id="" cols="30" rows="10"></textarea>

    <script src="script.js"></script>
</body>
</html>

Javascript

We have selected both button elements and textarea element using document.querySelector() method and stored them in the encode, decode, and output variables respectively.
We have attached a click event listener to both the button elements.
In the event handler function of the encode button, we are accessing text entered in the textarea using value property and passing it to the btoa() method as a parameter. This method will convert that text into a base64 encoded string. We are replacing text present in the textarea with this base64 encoded string.
In the event handler function of the decode button, we are accessing base64 encoded string in the textarea using value property and passing it to the atob() method as a parameter. This method will convert that base64 encoded string into a normal string. We are replacing the base64 encoded string present in the textarea with this normal string.

let encode = document.querySelector('#encode');
let decode = document.querySelector('#decode');
let output = document.querySelector('textarea');

encode.addEventListener('click', () =>{
   output.value = btoa(output.value) ;
});

decode.addEventListener('click', () =>{
    output.value = atob(output.value) ;
});

You May Also Like: