Skip to interactive tool

How to encode a URL in JavaScript

To URL-encode text online, paste the string and click Encode. The tool applies percent-encoding to special characters, making them safe for use in URLs and query parameters.

Use our free URL encoder for quick encode/decode, or follow the patterns below in Node.js and browsers. Correct encoding keeps query parameters safe and avoids broken links.

Last updated: 2026-04-12

✓ All processing happens in your browser ✓ No sign-up required ✓ 70 developer tools available ✓ Built by developers, for developers

What is URL Encode / Decode?

URL Encoder & Decoder applies percent-encoding to text for safe inclusion in URLs, and decodes encoded URLs back to readable form.

Benefits of URL Encode / Decode

  • Prevent broken links from special characters
  • Debug URL encoding issues quickly
  • Build correct query strings for APIs
  • Handle international characters in URLs

Features

  • Encode and decode in both directions
  • Handles + as space in form encoding
  • Shows before/after comparison
  • Works with full URLs and individual components

Common use cases

  • Encoding query parameters for API calls
  • Debugging double-encoded URLs
  • Creating redirect URLs with encoded paths
  • Processing form-encoded data

Quick steps to use URL Encode / Decode

  1. Scroll to the workspace below—this same page loads the interactive tool.
  2. Paste or type your input, then run the primary action.
  3. Copy the output or switch tabs to another Developer Friend utility.
  4. For long documents, combine with our JSON formatter, diff, or API tester as needed.

Detailed guide and reference: URL Encode / Decode

How to Use URL Encode / Decode

  1. Paste the text — Enter the URL component or encoded string you want to process.
  2. Encode or Decode — Click Encode for percent-encoding or Decode to restore the original text.
  3. Use the result — Copy the output for use in query parameters, API requests, or redirect URLs.

encodeURIComponent vs encodeURI

In JavaScript, encodeURIComponent is what you want for query parameter values (and often keys). It encodes nearly everything that is not unreserved, including &, =, and ?. encodeURI is meant for encoding full URIs where you still want certain delimiters to stay readable; it is used less often for building query strings.

const q = encodeURIComponent("hello world & more"); // hello%20world%20%26%20more

Decoding in the browser

decodeURIComponent reverses encoding. Form-encoded bodies sometimes use + for spaces; our tool normalizes that when decoding so pasted URLs from older forms still work.

decodeURIComponent("hello%20world"); // "hello world"

When to encode what

Try the query string builder to compose search params without manual concatenation.

Free URL encoder tool online

Paste any string and switch between encode and decode instantly. Like all Developer Friend utilities, processing happens in your browser—ideal for tokens, IDs, and internal URLs you do not want to send to a third-party server.

Example Usage

Encode a query parameter

Input:

hello world & more

Output:

hello%20world%20%26%20more

Percent-encode special characters so they are safe in URL query strings.

Key Features and Benefits

Key Features

  • Encode and decode in both directions
  • Handles + as space in form encoding
  • Shows before/after comparison
  • Works with full URLs and individual components

Benefits

  • Prevent broken links from special characters
  • Debug URL encoding issues quickly
  • Build correct query strings for APIs
  • Handle international characters in URLs

Common Use Cases

  • Encoding query parameters for API calls
  • Debugging double-encoded URLs
  • Creating redirect URLs with encoded paths
  • Processing form-encoded data

Best Practices

Common Mistakes to Avoid

How this compares to alternatives

Built-in URL and URLSearchParams in JavaScript are best in code; this tool matches that behavior for quick manual checks. Use a local-first encoder when you want encode/decode without extra requests to unknown domains.

Frequently Asked Questions about URL Encode / Decode

What is URL encoding?

URL encoding (percent-encoding) replaces special characters with %XX sequences so they can be safely included in URLs.

When should I use encodeURIComponent?

Use encodeURIComponent for query parameter values. It encodes characters like &, =, and ? that would otherwise break the URL structure.

What is the difference between encodeURI and encodeURIComponent?

encodeURI encodes a full URI but preserves structural characters like / and ?. encodeURIComponent encodes everything except unreserved characters.

Is the URL Encode / Decode on Developer Friend free?

Yes. URL Encode / Decode and every other utility on Developer Friend are free to use in your browser. There is no sign-up wall and no paywall for core features.

Does my data leave my device when I use URL Encode / Decode?

By default, URL Encode / Decode runs entirely in your browser. Your input is not uploaded to Developer Friend servers unless the tool explicitly performs a network request you start (for example, an API test or DNS lookup).

Can I use URL Encode / Decode offline?

After the first load, Developer Friend is cached by your browser and most tools work offline. Tools that need live network access still require a connection.

Who is Developer Friend for?

Developer Friend is built for software engineers, QA, DevOps, and technical writers who need fast formatters, encoders, and API helpers without installing desktop software.

How many tools are on Developer Friend?

Developer Friend offers 70+ free developer tools across JSON, API, encoding, time, Dev, and AI-assisted workflows.

Often opened next by developers

Static suggestions based on common workflows (your own recently used tools appear in the app when JavaScript runs).

About Developer Friend

Developer Friend is a free workspace with 70+ developer tools for JSON, APIs, encoding, time math, Dev utilities, and optional AI-assisted explainers. It is built for engineers who want fast answers in a browser tab without installing desktop software.

Privacy assurance

All processing happens in your browser for tools that do not initiate a network call. Sensitive payloads like JWTs, .env excerpts, and SQL drafts stay on your device unless you deliberately use a networked feature.

Why teams trust the platform

The interface is keyboard-friendly, theme-aware, and consistent across tools so you can move from formatting JSON to testing an API without relearning controls. There are no paywalls on core utilities and no sign-up requirement for day-to-day use.