Coder Perfect

When are you supposed to use escape instead of encodeURI / encodeURIComponent?

Problem

When should you use escape() and when should you use encodeURI() or encodeURIComponent() when encoding a query string to be delivered to a web server:

Use escape:

escape("% +&=");

OR

encodeURI() and encodeURIComponent are two functions that can be used to encode URLs ()

encodeURI("http://www.google.com?var1=value1&var2=value2");

encodeURIComponent("var1=value1&var2=value2");

Asked by Adam

Solution #1

It is not to be used! Section B.2.1.2 escape defines escape(), and Annex B’s introduction language states:

Behaviour:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

With the exception of @*_+-./, special characters are encoded.

For characters with a code unit value of 0xFF or less, the hexadecimal form is a two-digit escape sequence: percent xx.

The four-digit format percent uxxxx is used for characters having a larger code unit. This is forbidden in query strings (as defined by RFC3986):

query       = *( pchar / "/" / "?" )
pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"
unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
pct-encoded   = "%" HEXDIG HEXDIG
sub-delims    = "!" / "$" / "&" / "'" / "(" / ")"
              / "*" / "+" / "," / ";" / "="

A percent sign can only be used if it is immediately followed by two hex digits; a percent sign followed by u is not acceptable.

When you need a functioning URL, use encodeURI. Make the following decision:

encodeURI("http://www.example.org/a file with spaces.html")

to get:

http://www.example.org/a%20file%20with%20spaces.html

EncodeURIComponent should not be used because it will ruin the URL and cause a recursion.

http%3A%2F%2Fwww.example.org%2Fa%20file%20with%20spaces.html

The’character is not escaped by encodeURI, unlike encodeURIComponent.

When you need to encode the value of a URL parameter, use encodeURIComponent.

var p1 = encodeURIComponent("http://example.org/?a=12&b=55")

Then you can make the URL you require:

var url = "http://example.net/?param1=" + p1 + "&param2=99";

You’ll also get the following entire URL:

http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55¶m2=99

It’s worth noting that encodeURIComponent doesn’t handle the’character. It’s a typical bug to utilize it to make html attributes like href=’MyUrl,’ which could be vulnerable to injection. If you’re making html out of strings, use ” instead of’for attribute quotes, or add an extra layer of encoding (‘ can be encoded as percent 27).

Check out http://en.wikipedia.org/wiki/Percent-encoding for further information on this type of encoding.

Answered by 16 revs, 14 users 45%

Solution #2

The difference between encodeURI() and encodeURIComponent() is that encodeURIComponent encodes exactly 11 characters that encodeURI does not:

This table was created quickly in Google Chrome using console.table with the following code:

Answered by Johann Echavarria

Solution #3

This article was enlightening to me: Query String Parsing in Javascript Madness

When I was trying to figure out why decodeURIComponent wasn’t decoding ‘+’ correctly, I came upon it. Here’s an example:

String:                         "A + B"
Expected Query String Encoding: "A+%2B+B"
escape("A + B") =               "A%20+%20B"     Wrong!
encodeURI("A + B") =            "A%20+%20B"     Wrong!
encodeURIComponent("A + B") =   "A%20%2B%20B"   Acceptable, but strange

Encoded String:                 "A+%2B+B"
Expected Decoding:              "A + B"
unescape("A+%2B+B") =           "A+++B"       Wrong!
decodeURI("A+%2B+B") =          "A+++B"       Wrong!
decodeURIComponent("A+%2B+B") = "A+++B"       Wrong!

Answered by Damien

Solution #4

-_.!*'() is not encoded by encodeURIComponent, producing a difficulty when uploading data to php in an xml string.

For instance: xml>text x=”100″ y=”150″>xml>text x=”100″ y=”150″>xml>text x=”100″ y=” /xml> value=”It’s a single quotation value” />

Encode is a general escape mechanism. Percentage of URI 3Cxml%3E% 3Ctext% 20x=% 22100% 22% 20y=% 22150% 22% 20value=% 22It’s% 20a% 20value%20with%20single% 20quote%22% 20/% 3E% 20% 3C/xml%3E

As you can see, there is no encoding for single quotes. To solve the problem To fix a problem in my project, I built two functions: Encoding URL:

function encodeData(s:String):String{
    return encodeURIComponent(s).replace(/\-/g, "%2D").replace(/\_/g, "%5F").replace(/\./g, "%2E").replace(/\!/g, "%21").replace(/\~/g, "%7E").replace(/\*/g, "%2A").replace(/\'/g, "%27").replace(/\(/g, "%28").replace(/\)/g, "%29");
}

For Decoding URL:

function decodeData(s:String):String{
    try{
        return decodeURIComponent(s.replace(/\%2D/g, "-").replace(/\%5F/g, "_").replace(/\%2E/g, ".").replace(/\%21/g, "!").replace(/\%7E/g, "~").replace(/\%2A/g, "*").replace(/\%27/g, "'").replace(/\%28/g, "(").replace(/\%29/g, ")"));
    }catch (e:Error) {
    }
    return "";
}

Answered by Kirankumar Sripati

Solution #5

The escape() function is for javascript escaping, not HTTP escaping.

Answered by Daniel Papasian

Post is based on https://stackoverflow.com/questions/75980/when-are-you-supposed-to-use-escape-instead-of-encodeuri-encodeuricomponent