Skip to main content
Best Answer Hub logo Best Answer Hub.
Back to Playbooks
Best Answer Hub Playbooks · Developer Tools
Encoded in your browser, not on a server

URL Encoding, and Which Function to Use

A plain guide to percent-encoding: what it is, which characters need it, why a space becomes %20 in one place and a plus sign in another, the difference between encodeURI and encodeURIComponent, and the double-encoding bug that produces %2520. The Best Answer Hub URL Encoder does it all in your browser, so tokens and internal URLs are never sent to a server.

Encodeand decode
Privatenothing uploaded
Freeno signup, no ads
%20
a space in a URL path
vs + in a form body
2
functions: encodeURI vs encodeURIComponent
MDN
0
bytes sent to a server
encoded on your device
100%
runs in your browser
even offline

URL encoding, also called percent-encoding, replaces characters that would break a web address with a percent sign and two hex digits, and the Best Answer Hub URL Encoder does it in both directions and in your browser, so nothing you paste is sent to a server. This guide explains what percent-encoding is, which characters need it, why a space becomes %20 in a URL but a plus sign in a form, the encodeURI versus encodeURIComponent choice that trips up most developers, and the double-encoding bug behind a stray %2520.

Start here

What is the Best Answer Hub URL Encoder/Decoder?

The Best Answer Hub URL Encoder/Decoder is a single-page tool that percent-encodes and decodes text and URLs, with two modes: Component mode for a single value such as one query parameter, and Full URL mode for a whole address. It encodes and decodes in either direction and runs entirely in your browser with the native JavaScript functions, so nothing is transmitted, nothing is stored, and it keeps working offline. It needs no account and shows no ads. The tool sits in the Best Answer Hub Developer Toolbox and the wider Tools hub, is built and maintained by Shahbaz Ali Malik, and stays free because Best Answer Hub is funded by optional paid assessments rather than advertising.

The basics

What is URL encoding and why is it needed?

URL encoding represents a character as a percent sign followed by two hexadecimal digits of its byte value, so that characters with a special meaning, or none allowed in a URL, can travel safely. RFC 3986, the standard that defines URLs, puts it exactly: "A percent-encoded octet is encoded as a character triplet, consisting of the percent character followed by the two hexadecimal digits representing that octet's numeric value." Modern URLs encode text as its UTF-8 bytes, so an accented letter like e-acute becomes its two bytes, %C3%A9 (WHATWG URL Standard). Without encoding, a space, an ampersand, or a non-English character would break the link or be misread by the server.

The character rules

Which characters need to be encoded?

The characters that never need encoding are the unreserved set, and everything with a structural role must be encoded when it appears in data rather than as a delimiter. RFC 3986 defines the unreserved characters as the letters, digits, hyphen, period, underscore, and tilde (RFC 3986). The reserved characters, the delimiters like : / ? # [ ] @ and ! $ & ' ( ) * + , ; =, carry meaning in a URL, so if one of them is part of a value it must be percent-encoded (RFC 3986). The percent sign itself is always encoded, to %25, because it starts an encoding triplet. The table sets out the groups.

GroupCharactersEncoded?
UnreservedA-Z a-z 0-9 - . _ ~Never
Reserved (delimiters): / ? # [ ] @ ! $ & ' ( ) * + , ; =When used inside a value
Percent%Always, to %25
The classic confusion

Why does a space become %20 or a plus sign?

It depends on where the space appears. In a URL path or a normal query, a space is encoded as %20. In an HTML form body sent as application/x-www-form-urlencoded, a space is encoded as a plus sign instead. MDN states it plainly: a space is translated to "a plus, like in the percent-encoding version used in an application/x-www-form-urlencoded message, or in %20 like on URLs" (MDN). The practical consequence is that JavaScript's encodeURIComponent produces %20, so for a form-urlencoded body you sometimes replace %20 with a plus, and a decoder has to know the context, because in form data a plus means a space but in a path a plus is a literal plus.

The developer question

encodeURI vs encodeURIComponent: which do you use?

Use encodeURIComponent for a single piece you are dropping into a URL, and encodeURI for a whole URL you do not want to break. MDN is direct: encodeURI "is used to encode a URL as a whole," while for assembling values "you probably want to use encodeURIComponent() on each dynamic segment instead" (MDN). The difference is what each one leaves alone: encodeURI keeps the URL delimiters : / ? # & = intact, while encodeURIComponent encodes them too, which is exactly what you want for a query value. The Best Answer Hub URL Encoder offers both as Full URL and Component modes so the right one is a click away.

Why the choice matters
encodeURI("https://x.com/?q=Jack & Jill") // "https://x.com/?q=Jack%20&%20Jill" the & stays, and breaks the query encodeURIComponent("Jack & Jill") // "Jack%20%26%20Jill" the & becomes %26, safe as one value "https://x.com/?q=" + encodeURIComponent("Jack & Jill") // "https://x.com/?q=Jack%20%26%20Jill" correct

Encode the whole URL with encodeURI and an ampersand inside a value survives and is read by the server as a new field. Encode the value with encodeURIComponent (Component mode) and it becomes %26, so the value stays intact.

If a user writes Jack & Jill, without encodeURIComponent the ampersand could be interpreted on the server as the start of a new field and jeopardize the integrity of the data.MDN Web Docs, encodeURIComponent
The stray percent

Why is my URL showing %2520?

A stray %2520 means the string was encoded twice. Because the percent sign is itself a reserved trigger, encoding an already-encoded string turns every percent into %25, so a space that was already %20 becomes %2520, and an ampersand that was %26 becomes %2526 (MDN). Decoding it once is not enough; you get back a still-encoded string and have to decode again. The fix is to encode a value exactly once, and when decoding, if you still see %20 or %26 in the result, decode a second time. The Best Answer Hub URL Encoder shows the output immediately, so a double-encoded input is easy to spot and correct.

The double-encoding rule

Encode once, decode once. If you paste text that is already encoded into an encoder, you double it. If a decode leaves visible percent sequences behind, the input was double-encoded, so decode again. Watching the live output catches both cases before they reach production.

The part that matters

Is it safe to paste a URL with a token into an online encoder?

It is safe only if the encoding happens on your own device, and many online encoders do it on their servers. Developers routinely encode URLs that carry sensitive material: session IDs, bearer tokens, signed query parameters, and internal hostnames. Two of the most popular encoders process on their servers by default and offer a browser-local "Live mode" only as an opt-in (urlencoder.org), and FreeFormatter's own privacy statement confirms its tools use "server side processing" (FreeFormatter). Even with a no-retention promise, the data is still sent to a third party. There is a real security dimension too: attackers double-encode characters to slip past naive input filters, which is why understanding encoding matters when reviewing code (OWASP). The Best Answer Hub URL Encoder runs client-side by default, so a token never leaves your browser.

The honest comparison

How is it different from other online encoders?

The difference is that the Best Answer Hub URL Encoder is client-side by default, always, where the popular encoders process on their servers unless you switch on a limited opt-in mode. It also makes the two choices that matter explicit, Component versus Full URL, and it both encodes and decodes. The table sets the usual experience next to this one.

What you getBest Answer HubTypical online encoder
Where encoding happensIn your browser, alwaysOften server-side by default
Data sent to a third partyNoneYes in default modes
Component vs whole-URLBoth, clearly labeledOften one generic mode
Encodes and decodesBothUsually both
No signup, no adsYesVaries
Works offlineYesNot in default server mode
Pair it with the rest of the toolbox

The Best Answer Hub Developer Toolbox has the neighbors you reach for next: a Base64 Encoder for the other everyday encoding, and a JSON Formatter for the payloads those URLs carry. Each runs in the browser and sends nothing.

Encode it now

Open the URL Encoder

Free, no signup, and encoded entirely in your browser. Switch between Component and Full URL mode, encode or decode, and copy the result without sending a thing to a server.

Encode or decode a URL
Good questions

Common questions about URL encoding

What is the Best Answer Hub URL Encoder/Decoder?
The Best Answer Hub URL Encoder/Decoder is a free, browser-based tool that percent-encodes and decodes text and URLs. It has a Component mode for a single value like a query parameter and a Full URL mode for a whole address, works in both directions, and runs entirely on your device so nothing is uploaded, with no account needed.
What is URL encoding (percent-encoding)?
URL encoding, or percent-encoding, replaces a character with a percent sign and two hexadecimal digits of its byte value, so characters that are unsafe or have special meaning can travel in a URL. RFC 3986 defines it. Modern URLs encode text as its UTF-8 bytes. The Best Answer Hub URL Encoder applies this in your browser.
Which characters need to be URL-encoded?
The unreserved characters, letters, digits, hyphen, period, underscore, and tilde, are never encoded. Reserved delimiter characters such as a slash, question mark, hash, ampersand, and equals sign must be encoded when they appear inside a value. The percent sign itself is always encoded to %25. The Best Answer Hub URL Encoder follows this RFC 3986 classification.
Why does a space become %20 or a plus sign?
It depends on context. In a URL path or query a space is %20, but in an HTML form body sent as application/x-www-form-urlencoded a space is a plus sign. JavaScript encodeURIComponent produces %20, so a form body sometimes needs %20 swapped for a plus. The Best Answer Hub URL Encoder uses %20 to match URL standards.
What is the difference between encodeURI and encodeURIComponent?
encodeURI is for a whole, well-formed URL and leaves the delimiters like slash, question mark, and ampersand intact. encodeURIComponent is for one component, such as a single query value, and encodes those delimiters too. Using the wrong one breaks links. The Best Answer Hub URL Encoder offers both as Full URL and Component modes.
Which function should I use for a query parameter?
Use encodeURIComponent, the Component mode. A query value can contain characters like an ampersand or equals sign that would otherwise be read as URL structure, and encodeURIComponent encodes them so the value stays intact. MDN recommends it for user-entered form fields. The Best Answer Hub URL Encoder Component mode does exactly this.
Why is my URL showing %2520?
A %2520 means the string was encoded twice. Because the percent sign is a reserved trigger, encoding an already-encoded string turns every percent into %25, so %20 becomes %2520. Decoding once leaves a still-encoded string, so you decode again. Encode exactly once. The Best Answer Hub URL Encoder shows live output so double-encoding is easy to spot.
How are emoji and accented letters encoded?
They are converted to their UTF-8 bytes, and each byte is written as a percent sign and two hex digits. An accented e-acute becomes %C3%A9, and an emoji becomes a series of percent-encoded bytes. The Best Answer Hub URL Encoder handles full Unicode input in both modes, matching how browsers and Node.js encode text.
What are reserved and unreserved characters?
Unreserved characters, defined by RFC 3986 as letters, digits, hyphen, period, underscore, and tilde, are always safe and never need encoding. Reserved characters are the delimiters that structure a URL, such as a slash, question mark, hash, and ampersand, and must be encoded when used as data. The Best Answer Hub URL Encoder applies this distinction.
Is it safe to paste a URL with a token into an online encoder?
Only if the tool encodes on your device. Many popular encoders process on their servers by default, so a pasted token or internal URL is sent to a third party. The Best Answer Hub URL Encoder runs client-side, so nothing is transmitted. You can confirm it by opening the Network tab or going offline after the page loads.
Does this tool decode as well as encode?
Yes. The Best Answer Hub URL Encoder works in both directions. Paste a percent-encoded string, choose the mode, and decode it back to plain text using the browser native decode functions. It handles standard RFC 3986 encoding and the UTF-8 sequences that modern frameworks produce, all in your browser.
Can I use the URL Encoder offline?
Yes. Because all encoding and decoding runs client-side, the Best Answer Hub URL Encoder keeps working after you disconnect. Once the page has loaded it needs no internet connection, which is useful in secure environments or anywhere network access is restricted, and it also means your input never leaves the device.
What is the difference between URL encoding and Base64?
URL encoding makes text safe for web addresses using percent signs and hex, while Base64 represents data with a 64-character alphabet and is better suited to binary content. They solve different problems. For a string you are placing in a URL, use URL encoding; for the Base64 case, the Best Answer Hub Base64 Encoder is the right tool.
How is it different from other online encoders?
The Best Answer Hub URL Encoder is client-side by default, always, where the popular encoders process on their servers unless you enable a limited opt-in mode. It also makes the Component versus Full URL choice explicit and both encodes and decodes, with no signup and no ads, and it works offline.
Is the URL Encoder free?
Yes. The Best Answer Hub URL Encoder is completely free with no usage limits and no signup, and it stays free because Best Answer Hub is funded by optional paid assessments rather than advertising. It runs entirely in your browser, so it carries no ads and sends nothing to a server.
People also read

Keep going

Sources

Jump into the tools: URL Encoder/Decoder, Developer Toolbox, Base64 Encoder, and all Tools.

Built & maintained by Shahbaz Ali Malik Last updated: