How to URL Encode a String
Learn percent-encoding, choose between encodeURIComponent and encodeURI, handle + versus %20, and avoid double-encoding bugs.
Use encodeURIComponent for a single URL value and encodeURI for a complete URL. Both use percent-encoding so characters can travel safely in a URL; the right choice depends on whether punctuation is data or URL structure.
What URL encoding does
URLs are made from components separated by punctuation. Percent-encoding represents a byte as % followed by two hexadecimal digits: a space becomes %20, and an ampersand inside a parameter value becomes %26. Encoding is representation, not encryption.
The unreserved characters are letters, digits, - . _ ~. Reserved characters such as : / ? # [ ] @ & = + can delimit URL components, so whether they should be encoded depends on the component you are building.
encodeURIComponent vs encodeURI
| Function | Use it for | Example |
|---|---|---|
| encodeURIComponent | One component or parameter value | encodeURIComponent("a&b") → "a%26b" |
| encodeURI | A complete URL with its separators | encodeURI("https://x.test/a b") → "https://x.test/a%20b" |
If you encode a whole URL with encodeURIComponent, it will encode ://, ?, and & too—correct for treating the entire URL as one value, but not for navigating to it.
Build query strings safely
Encode names and values separately, then combine them with the query-string delimiters:
const query = "q=" + encodeURIComponent("cats & dogs")
+ "&page=" + encodeURIComponent("2");
// q=cats%20%26%20dogs&page=2For form submissions and many query-string libraries, spaces are serialized as + instead of %20. A literal plus in that format is encoded as %2B. The two spellings are not interchangeable in every URL context.
Unicode and double encoding
JavaScript’s encoders convert text to UTF-8 before percent-encoding its bytes. For example, é becomes UTF-8 bytes C3 A9, written as %C3%A9. A character can therefore occupy several percent-encoded bytes.
Encode once at the URL boundary and decode once at the matching boundary. If an already encoded %20 is encoded again, the percent sign becomes %25, producing %2520. That is double encoding, not extra safety.
Try the URL Encoder
The URL Encoder & Decoder runs these operations in your browser. Choose Component for a parameter or other single value, Full URL for a URL whose structure should remain intact, and enable Treat + as space only when decoding form-style data. It also reports malformed percent sequences and shows the breakdown of an absolute URL.
How to URL encode a string
1. Choose what you are encoding
Encode one value with encodeURIComponent, or encode a complete URL while preserving its structure with encodeURI.
2. Encode the value
The encoder converts the string to UTF-8 bytes and percent-encodes bytes that are not allowed in that context.
3. Build query parameters safely
Encode parameter names and values separately, then join them with = and &, rather than encoding the complete URL as one value.
4. Decode once at the matching boundary
Use decodeURIComponent for percent-encoded components and opt into treating plus signs as spaces only for form-style query data.
// Frequently Asked Questions
Should I use encodeURI or encodeURIComponent?
Use encodeURIComponent for one URL component, such as a query parameter value. Use encodeURI for a complete URL whose separators such as ://, ?, &, and # must remain meaningful.
Is a plus sign the same as %20?
Not in every URL context. %20 is percent-encoding for a space. A plus sign represents a space in application/x-www-form-urlencoded data, but in a general URL it is a literal plus. The URL Encoder lets you choose whether + should be treated as a space while decoding.
Why did my encoded value become %2520?
That is usually double encoding: % was encoded again as %25. Encode a value once at the boundary where it enters a URL, and decode it once at the boundary where it leaves one.
Does URL encoding encrypt data?
No. Percent-encoding changes representation for transport; it does not hide the value or provide confidentiality. Use HTTPS and appropriate encryption for sensitive data.