Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Window atob( ) Method
The HTML window atob() method is used to decode a Base64 encoded string. It is the counterpart to the btoa() method, which encodes strings into Base64 format. The atob stands for "ASCII to Binary" and converts Base64 encoded data back to its original string format.
Syntax
Following is the syntax for the atob() method −
window.atob(encodedString)
Parameters
The atob() method accepts one parameter −
encodedString − A Base64 encoded string that needs to be decoded. This must be a valid Base64 string, otherwise the method will throw a
DOMException.
Return Value
The method returns a decoded string containing the original data. If the input is not a valid Base64 string, it throws an InvalidCharacterError exception.
Basic Example
Following example demonstrates the basic usage of atob() method −
<!DOCTYPE html>
<html>
<head>
<title>HTML Window atob() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Base64 Decode Example</h2>
<p><b>Encoded String:</b> VHV0b3JpYWxzUG9pbnQ=</p>
<p id="result"></p>
<script>
var encodedString = "VHV0b3JpYWxzUG9pbnQ=";
var decodedString = window.atob(encodedString);
document.getElementById("result").innerHTML = "<b>Decoded String:</b> " + decodedString;
</script>
</body>
</html>
The output shows the decoded string −
Encoded String: VHV0b3JpYWxzUG9pbnQ= Decoded String: TutorialsPoint
Interactive Encode and Decode Example
Following example demonstrates both btoa() and atob() methods working together −
<!DOCTYPE html>
<html>
<head>
<title>HTML Window atob() and btoa() Methods</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 14px;
}
button {
background: #007cba;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background: #005a87;
}
.result {
background: #f9f9f9;
padding: 15px;
margin-top: 15px;
border-radius: 3px;
border-left: 4px solid #007cba;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<h2>Base64 Encoder/Decoder</h2>
<textarea id="inputText" placeholder="Enter your message here" rows="4">Hello TutorialsPoint!</textarea>
<div>
<button onclick="encodeText()">Encode to Base64</button>
<button onclick="decodeText()">Decode from Base64</button>
<button onclick="clearResult()">Clear</button>
</div>
<div id="result" class="result"></div>
</div>
<script>
function encodeText() {
var input = document.getElementById("inputText").value;
try {
var encoded = window.btoa(input);
document.getElementById("result").innerHTML = "<strong>Encoded:</strong> " + encoded;
} catch(e) {
document.getElementById("result").innerHTML = "<strong>Error:</strong> " + e.message;
}
}
function decodeText() {
var input = document.getElementById("inputText").value;
try {
var decoded = window.atob(input);
document.getElementById("result").innerHTML = "<strong>Decoded:</strong> " + decoded;
} catch(e) {
document.getElementById("result").innerHTML = "<strong>Error:</strong> Invalid Base64 string";
}
}
function clearResult() {
document.getElementById("result").innerHTML = "";
document.getElementById("inputText").value = "";
}
</script>
</body>
</html>
This example provides buttons to encode text to Base64 using btoa() and decode Base64 strings using atob(). It includes error handling for invalid Base64 input.
Error Handling Example
Following example shows how to handle errors when decoding invalid Base64 strings −
<!DOCTYPE html>
<html>
<head>
<title>atob() Error Handling</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Error Handling with atob()</h2>
<div id="output"></div>
<script>
var output = document.getElementById("output");
// Valid Base64 string
try {
var validBase64 = "SGVsbG8gV29ybGQ=";
var result1 = window.atob(validBase64);
output.innerHTML += "<p><b>Valid:</b> '" + validBase64 + "' ? '" + result1 + "'</p>";
} catch(e) {
output.innerHTML += "<p><b>Error:</b> " + e.message + "</p>";
}
// Invalid Base64 string
try {
var invalidBase64 = "Hello World!";
var result2 = window.atob(invalidBase64);
output.innerHTML += "<p><b>Result:</b> " + result2 + "</p>";
} catch(e) {
output.innerHTML += "<p style='color: red;'><b>Invalid:</b> '" + invalidBase64 + "' ? Error: " + e.name + "</p>";
}
</script>
</body>
</html>
The output demonstrates both successful decoding and error handling −
Valid: 'SGVsbG8gV29ybGQ=' ? 'Hello World' Invalid: 'Hello World!' ? Error: InvalidCharacterError
Key Points
The
atob()method only works with valid Base64 encoded strings.It throws an
InvalidCharacterErrorif the input contains invalid Base64 characters.The method is case-sensitive and expects proper Base64 padding with
=characters.Always use try-catch blocks when decoding user-provided Base64 strings.
The
atob()method works only with ASCII strings and cannot handle Unicode characters directly.
Browser Compatibility
The atob() method is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It is part of the HTML5 specification and widely supported across different platforms.
Conclusion
The window.atob() method is essential for decoding Base64 encoded strings in web applications. It works alongside btoa() to provide complete Base64 encoding and decoding functionality. Always implement proper error handling when working with user input to manage invalid Base64 strings gracefully.
536 Views
