How to Encode and Decode Base64 and URL Strings

Data transmission across the internet requires safe character encodings. Binary files, API parameters, and query string data must be converted into safe, ASCII-compatible strings. This guide covers how to encode and decode Base64 strings and escape URL structures client-side in the browser.

Understanding Base64 vs. URL Encoding

Base64 and URL encoding are designed for different purposes during data transfer:

• Base64 Encoding: Converts binary data (like images, keys, or PDF files) into a 64-character ASCII set (A-Z, a-z, 0-9, +, /, and padding =). This allows binary transmission over text-only protocols like HTTP and SMTP.
• URL Encoding (Percent Encoding): Escapes reserved URL characters (like spaces, ?, &, and /) with a percent symbol and hexadecimal representation (e.g. spaces become %20). This ensures URLs remain well-formed when query parameters contain spaces or special symbols.

Base64 & URL Encoding in JavaScript

Modern browsers provide native, global functions to execute both Base64 and URL-escaping actions client-side without external dependencies.

Step-by-Step Code Examples

Here is how to perform standard encoding and decoding client-side in JavaScript:

1. Base64 Operations

// Base64 Encoding (String to Base64)
const plainText = "Hello, World! 🌿";
// Handle unicode characters safely
const base64Encoded = btoa(unescape(encodeURIComponent(plainText)));
console.log("Encoded:", base64Encoded); // SGVsbG8sIFdvcmxkISDwn44o

// Base64 Decoding (Base64 to String)
const decodedText = decodeURIComponent(escape(atob(base64Encoded)));
console.log("Decoded:", decodedText); // Hello, World! 🌿

2. URL Encoding & Escaping

// URL Parameter Escaping
const searchPrompt = "category=data science&limit=10";
const urlEncoded = encodeURIComponent(searchPrompt);
console.log("URL Encoded:", urlEncoded); // category%3Ddata%2520science%26limit%3D10

// URL Parameter Unescaping
const urlDecoded = decodeURIComponent(urlEncoded);
console.log("URL Decoded:", urlDecoded); // category=data science&limit=10

Encode & Decode instantly using Sylvaera

For fast, in-browser URL encoding, decoding, or Base64 payload conversion, use Sylvaera's Base64 & URL Encoder / Decoder. It supports URL-safe base64 options, URL escaping, and strict client-side conversions so your data never leaves your browser.