</> DevDrillsSupport

URL Drill

Common URL encoding mistakes in JavaScript.

URL encoding looks simple, but incorrect encoding can break APIs, query parameters, redirects, routing, authentication flows, and frontend navigation. Understanding how URL encoding works helps avoid frustrating debugging sessions.

6 min read

Why URL encoding exists

URLs can only safely contain specific characters.

Characters like spaces, ampersands, question marks, and Unicode symbols may break URLs if they are not encoded correctly.

Hello World
↓
Hello%20World

URL encoding transforms unsafe characters into safe transportable values.

encodeURI vs encodeURIComponent

One of the most common frontend mistakes is using the wrong encoding function.

encodeURI

Encodes a full URL while preserving URL structure characters.

encodeURIComponent

Encodes individual query values and dynamic parameters safely.

Frontend developers usually need encodeURIComponent().

Broken query parameters

Query parameters frequently break when values are inserted directly.

// broken
const url =
  "/search?q=react hooks";

// safer
const url =
  "/search?q=" +
  encodeURIComponent("react hooks");

Spaces and special characters can otherwise terminate parameters incorrectly.

Double encoding

A common bug happens when developers encode an already encoded value.

Hello World
↓
Hello%20World
↓
Hello%2520World

%20 itself becomes encoded into %2520.

This often causes broken redirects and malformed API requests.

Unicode and UTF-8 issues

URLs often contain non-English characters.

Привіт
↓
%D0%9F%D1%80%D0%B8%D0%B2%D1%96%D1%82

Proper encoding ensures URLs work consistently across browsers and servers.

Common frontend scenarios

Search pages

Search terms often require encoding.

API requests

Query params break easily without encoding.

Redirects

Auth redirects often contain nested URLs.

Routing

Dynamic route params may contain unsafe characters.

Sharing URLs

User-generated URLs frequently need encoding.

Frontend state

Applications sometimes store state inside URLs.

URL debugging tips

  • Check for double encoding
  • Inspect query params carefully
  • Use encodeURIComponent for values
  • Decode URLs during debugging
  • Test Unicode characters
  • Validate redirects carefully

Try the tool

Encode and decode URLs instantly

Use the DevDrills URL Encoder Decoder to safely encode query parameters, decode URLs, and debug frontend routing and API problems.

Open URL Encoder