URL Encoder / Decoder

URL encoding, also known as percent-encoding, is a standard mechanism to convert reserved or unsafe characters inside web addresses into a safe US-ASCII format. According to RFC 3986, characters like spaces, question marks, and ampersands serve structural roles in query strings and must be encoded when passed as data values. If you are converting raw credentials or binary coordinates, you can also transform them using our Base64 Encoder / Decoder. Here is how unsafe characters are translated:

// Unsafe Plain Text Query
"hello world & company"

// Percent-Encoded Equivalent
"hello%20world%20%26%20company"

JavaScript provides native methods to encode URI components. The main difference lies in whether structural characters (like colons, slashes, and question marks) are preserved or encoded. If you are formatting variable constants before constructing your API fetch queries, check our Case Converter. Here is a comparison of standard JS encoding methods:

const component = "https://example.com/api?user=Jane Doe";

// encodeURI (preserves slashes, colons, and query delimiters)
console.log(encodeURI(component));
// "https://example.com/api?user=Jane%20Doe"

// encodeURIComponent (encodes all non-alphanumeric symbols)
console.log(encodeURIComponent(component));
// "https%3A%2F%2Fexample.com%2Fapi%3Fuser%3DJane%20Doe"

Modern web applications parse search parameters from address bars using the native URLSearchParams interface. This automatically handles decoding percent sequences back into readable keys and values. If you are extracting structured nested data arrays from query objects, you can inspect them with our JSON Formatter & Validator. Here is how to parse parameters in JS:

const query = "?id=123&status=active%20user";
const params = new URLSearchParams(query);

console.log(params.get("id"));     // "123"
console.log(params.get("status")); // "active user" (Auto-decoded)

Decoding reverses the process, reconstructing the original symbols from the percent-encoded sequences. If the input string contains a percent sign followed by invalid hexadecimal characters (e.g. %2G), standard methods will crash. If you need to test or validate custom string patterns before running decoding pipelines, try our RegEx Tester. Here is a safe JS decoding wrapper:

function safeDecodeUri(str) {
  try {
    return decodeURIComponent(str);
  } catch (e) {
    return "Error: Malformed percent-encoding sequence.";
  }
}

Historically, the plus sign (+) was used to represent spaces in application/x-www-form-urlencoded payloads. However, modern RFC specifications prefer %20. If you are scrubbing duplicate links or sanitizing redirect rosters, filter them using our Duplicate Line Remover. Here is how to clean legacy form spaces:

/* Replace legacy plus signs before decoding */
function decodeFormString(str) {
  const normalized = str.replace(/\+/g, "%20");
  return decodeURIComponent(normalized);
}

Unencoded URLs passed as parameters can lead to open redirect vulnerabilities or header injection attacks. Encoding redirect paths ensures that delimiters like colons and slashes are treated as data, not instructions. If you are formatting links inside developer document drafts, convert them using our Markdown to HTML Converter. Here is how to structure a safe redirect URL:

const target = "https://example.com/dashboard?user=John";
const safeRedirect = `https://auth.com/login?redirect=${encodeURIComponent(target)}`;

// Output: "https://auth.com/login?redirect=https%3A%2F%2Fexample.com..."