toolkit

URL Encoder

Runs in browser

Encode text for safe URL transmission

Quick Reference

How to Use

Enter text or URL to process. Switch tabs for Encode/Decode.

You will see:

  • Encoded/Decoded Output
  • URL Safety Check
  • One-click Copy
  • Live Conversion
Encoded URL

Start typing to see results

URL Encoding Reference
Char Encoded Description
%20 Space
! %21 Exclamation
" %22 Quote
# %23 Hash
$ %24 Dollar
% %25 Percent
& %26 Ampersand
' %27 Apostrophe
( %28 Open paren
) %29 Close paren
* %2A Asterisk
+ %2B Plus
, %2C Comma
/ %2F Slash
: %3A Colon
; %3B Semicolon
= %3D Equals
? %3F Question
@ %40 At sign
[ %5B Open bracket
] %5D Close bracket

Related Tools

Encoders

Base64 Encoder

About URL Encoding

URL encoding (also known as percent-encoding) converts special characters into a format that can be safely transmitted in URLs. URLs can only contain a limited set of characters, and special characters like spaces, ampersands, and question marks have specific meanings in URLs. To include these characters as data (not structure), they must be encoded.

Key Concepts

Percent Encoding

Characters are replaced with % followed by two hexadecimal digits. For example, a space becomes %20.

Safe Characters

Characters that don't need encoding: A-Z, a-z, 0-9, -, _, ., ~

Reserved Characters

Characters that must be encoded in certain contexts: ! # $ & ' ( ) * + , / : ; = ? @

Common Character Encodings

Character Encoded Description
(space)%20 or +Space character
!%21Exclamation mark
#%23Hash (fragment identifier)
$%24Dollar sign
%%25Percent (escape character)
&%26Ampersand (query separator)
+%2BPlus sign
/%2FForward slash (path separator)
:%3AColon (protocol separator)
=%3DEquals (key-value separator)
?%3FQuestion mark (query start)
@%40At sign

encodeURI vs encodeURIComponent

JavaScript provides two functions for URL encoding with different behaviors:

encodeURI()

Encodes a complete URI, preserving characters that have special meaning in URLs (like /, ?, &).

encodeURI("https://example.com/path?q=hello world")
// "https://example.com/path?q=hello%20world"
// Notice: / ? & are NOT encoded

encodeURIComponent()

Encodes a URI component (like a query parameter value), encoding ALL special characters including /, ?, &.

encodeURIComponent("hello world & goodbye")
// "hello%20world%20%26%20goodbye"
// Use for query parameter VALUES

When to Use Which?

  • encodeURIComponent: Query parameters, form data, any user input
  • encodeURI: Complete URLs where structure should be preserved
  • When in doubt, use encodeURIComponent for safety

URL Structure

https://user:pass@example.com:8080/path/to/page?query=value#fragment
│       │    │    │           │    │            │           │
│       │    │    hostname    port path         query       fragment
│       │    password
│       username
protocol

Best Practices

  • Always encode user-provided data before including in URLs
  • Use encodeURIComponent for query parameter values
  • Use URLSearchParams for building query strings (modern approach)
  • Double-check encoding when combining URL parts from different sources
  • Be aware of double-encoding issues (encoding already-encoded strings)

💡 Pro Tips

  • Modern browsers provide URLSearchParams API for safer query string handling
  • Form data encoding uses application/x-www-form-urlencoded format
  • Spaces can be encoded as either %20 or + in query strings
  • Always decode URLs before displaying them to users

Further Reading