URL Encode Colon (:)

The colon (:) is a reserved character in URLs with two primary structural roles: it separates the scheme from the rest of the URL (e.g., https:) and it separates the host from the port number (e.g., localhost:3000). When a colon appears as data in path segments or query parameter values, it should be encoded as %3A.

Percent-encoded form: %3A represents the colon (ASCII code 58, hexadecimal 0x3A).

Structural roles of the colon:

1. Scheme delimiter: https://, ftp://, mailto: — the colon after the scheme name is structural
2. Port separator: example.com:8080 — separates host from port number
3. Userinfo separator: user:password@host — separates username from password (deprecated)

JavaScript behavior:

encodeURIComponent("10:30 AM")          // "10%3A30%20AM"
encodeURIComponent("localhost:3000")    // "localhost%3A3000"
encodeURI("https://example.com:8080")   // "https://example.com:8080" (preserves structural colons)

When to encode: You generally need to encode colons when they appear in:

• Time values passed as query parameters: ?time=10%3A30%3A00
• IPv6 addresses in certain contexts (though brackets handle most cases)
• Key-value data formats within a single parameter: ?filter=status%3Aactive
• File paths on Windows passed as parameters: ?path=C%3A%5CUsers

When encoding is optional: RFC 3986 allows unencoded colons in path segments and query strings in many cases. Browsers generally handle unencoded colons in paths correctly (e.g., /article/2026-01-15T10:30:00). However, encoding is safer for interoperability, as some proxies or security filters may reject or misinterpret unencoded colons.

Pitfall: When passing URLs as parameter values, the colons in https:// must be encoded along with everything else. Forgetting this when constructing callback URLs or redirect parameters is a common source of bugs. Always use encodeURIComponent() for the entire URL value: ?redirect=https%3A%2F%2Fexample.com.