JS: encodeURIComponent

By Xah Lee. Date: .

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

var yy = "-_.!~*'()";
console.log(encodeURIComponent(yy) === yy); // true

// unchanged chars
var yy = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
console.log(encodeURIComponent(yy) === yy); // true

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

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: String Code Unit vs 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 Character Escape Sequence

String Topic

  1. JS: Default Charset/Encoding
  2. JS: String Code Unit vs Code Point
  3. JS: Unicode Character Escape Sequence
  4. JS: Allowed Characters in Identifier
  5. HTML: Allowed Characters in id Attribute
  6. HTML: Character Sets and Encoding
  7. HTML/XML Entity List

  1. JS: Template String
  2. JS: Convert String to Number
  3. JS: Encode URL, Escape String
  4. JS: Format Number
  5. JS: JSON Object

  1. JS: String Object
  2. JS: String.prototype
  3. JS: String Constructor
Like what you read? Buy JavaScript in Depth