JS: encodeURIComponent

By Xah Lee. Date: . Last updated: .

encodeURIComponent is a global function object.

[see JS: the Global Object]

encodeURIComponent is useful to embed a URL in a URL. Like encodeURI but changes more chars, including slash and colon in http://.

encodeURIComponent(str) is like encodeURI(str), but it also encodes the following chars: {; , / ? : @ & = + $ #} .

[see JS: encodeURI]

console.log(
    encodeURIComponent("http://en.wikipedia.org/wiki/Sylvester–Gallai_theorem")
);
// prints http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSylvester%E2%80%93Gallai_theorem

encodeURIComponent is useful if you want to embed a URI as a parameter inside a URI. For example:

http://example.com/url?url=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSylvester%E2%80%93Gallai_theorem
// unchanged chars
const xx = "-_!~*'().0123456789.ABCDEFGHIJKLMNOPQRSTUVWXYZ.abcdefghijklmnopqrstuvwxyz";
console.log(
    encodeURIComponent(xx) === xx
);
// true

// ASCII chars that are changed
console.log(
    encodeURIComponent( " ;,/?:@&=+$#" ) === "%20%3B%2C%2F%3F%3A%40%26%3D%2B%24%23"
);
// true

Reference

ECMAScript® 2016 Language Specification#sec-encodeuricomponent-uricomponent

URL Topic

  1. JS: encodeURI
  2. JS: encodeURIComponent
  3. JS: escape
  4. JS: Get URL (window.location)

Character Topic

  1. JS: Character, Code Unit, Code Point
  2. JS: Convert Character To/From Codepoint
  3. JS: String.fromCodePoint
  4. JS: String.fromCharCode
  5. JS: String.prototype.charAt
  6. JS: String.prototype.charCodeAt
  7. JS: String.prototype.codePointAt
  8. JS: Convert Decimal/Hexadecimal
  9. JS: Unicode Escape Sequence

JS String

  1. String Overview
  2. Template String
  3. Char, Code Unit, Code Point
  4. String Escape Sequence
  5. Unicode Escape Sequence
  6. String to Number
  7. Encode URL, Escape String
  8. Format Number
  9. Source Code Encoding
  10. Allowed Characters in Identifier
  11. String Object
  12. String.prototype
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog