How To Use Window AtoB and BtoA Methods In JavaScript

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

In Java Script we can do encode and decode on click of button so today we are going to discuss how to do encode and decode to given string

How To Use Window AtoB and BtoA Methods In JavaScript

Window atob() method

The atob() method decodes a base-64 encoded string.

Syntax and Usage

window.atob(encodedStr)


Parameter Values

Parameter   Description
encodedStr Required. The string which has been encoded by the btoa() method
 

Return Value:   A String, representing the decoded string

Example(1)
<button class="btn btn-info" onclick="atob_function()">atob</button>
<h4 id="demo1"></h4>
<script>
    function atob_function() {
        var str = "Hello World! Welcome to Bajarangisoft To Learn More About JAVASCRIPT";
        var enc = window.btoa(str);
        var dec = window.atob(enc);

        var res = "Encoded String: " + enc + "<br>" + "Decoded String: " + dec;
        document.getElementById("demo1").innerHTML = res;
    }
</script>

In above example when you click the button it will decode a base-64 encoded string.
 

Window btoa() Method

The btoa() method encodes a string in base-64.

This method uses the "A-Z", "a-z", "0-9", "+", "/" and "=" characters to encode the string.

Syntax and Usage

window.btoa(str)

Parameter Values
Parameter           Description
str                 Required.The string to be encoded
 

Return Value:   A String, representing the base-64 encoded string


Example(1)
<button class="btn btn-info" onclick="btoa_function()">btoa</button>
<h4 id="demo2"></h4>
<script>
    function btoa_function() {
        var str = "Hello World! Welcome to Bajarangisoft To Learn More About JAVASCRIPT";
        var enc = window.btoa(str);

        var res = "Encoded String: " + enc;
        document.getElementById("demo2").innerHTML = "The original string: " + str + "<br>" + res;
    }
</script>

In above example when you click the button it will encode a string in base-64.


Complete Code For Window AtoB and BtoA Methods In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title> Use Window AtoB and BtoA Methods In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;

    }

</style>

<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1>Use Window AtoB and BtoA Methods In JavaScript</h1>
    </div>
    <br>
   <div class="well">
       <button class="btn btn-info" onclick="atob_function()">atob</button>
       <h2>Welcome to Bajarangisoft To Learn More About JAVASCRIPT</h2>

       <h4 id="demo1"></h4>
       <button class="btn btn-info" onclick="btoa_function()">btoa</button>
       <h4 id="demo2"></h4>
   </div>
</body>
</html>
<button class="btn btn-info" onclick="btoa_function()">btoa</button>
<h4 id="demo2"></h4>
<script>
    function atob_function() {
        var str = "Hello World! Welcome to Bajarangisoft To Learn More About JAVASCRIPT";
        var enc = window.btoa(str);
        var dec = window.atob(enc);

        var res = "Encoded String: " + enc + "<br>" + "Decoded String: " + dec;
        document.getElementById("demo1").innerHTML = res;
    }
    function btoa_function() {
        var str = "Hello World! Welcome to Bajarangisoft To Learn More About JAVASCRIPT";
        var enc = window.btoa(str);

        var res = "Encoded String: " + enc;
        document.getElementById("demo2").innerHTML = "The original string: " + str + "<br>" + res;
    }
</script>

 

Related Post