Podczas kodowania ciągu zapytania, który ma zostać wysłany na serwer sieciowy - kiedy używasz escape()i kiedy używasz encodeURI()lub encodeURIComponent():

Użyj ucieczki:

escape("% +&=");

LUB

użyj encodeURI () / encodeURIComponent ()

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

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

ucieczka()

Nie używaj tego! escape()jest zdefiniowany w sekcji B.2.1.2 ucieczka, a tekst wprowadzający do załącznika B mówi:

... Wszystkie funkcje językowe i zachowania określone w tym załączniku mają jedną lub więcej niepożądanych cech, a przy braku starszego użycia zostałyby usunięte z tej specyfikacji. ...
... Programiści nie powinni używać ani zakładać istnienia tych funkcji i zachowań podczas pisania nowego kodu ECMAScript ....

Zachowanie:

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

Znaki specjalne są kodowane z wyjątkiem: @ * _ + -. /

Formularz szesnastkowy dla bohaterów, których kod jest jednostka wartość 0xFF lub mniej, to sekwencja ucieczki dwucyfrowa: %xx.

W przypadku znaków o większej jednostce kodu stosuje się czterocyfrowy format %uxxxx. Jest to niedozwolone w ciągu zapytania (zgodnie z definicją w RFC3986 ):

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

Znak procentu jest dozwolony tylko wtedy, gdy bezpośrednio po nim następują dwie cyfry szesnastkowe, a następnie procent unie jest dozwolony.

encodeURI ()

Użyj encodeURI, jeśli potrzebujesz działającego adresu URL. Zadzwoń:

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

uzyskać:

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

Nie wywołuj encodeURIComponent, ponieważ zniszczyłby adres URL i zwrócił

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

encodeURIComponent ()

Użyj encodeURIComponent, jeśli chcesz zakodować wartość parametru URL.

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

Następnie możesz utworzyć potrzebny adres URL:

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

Otrzymasz ten pełny adres URL:

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

Zauważ, że encodeURIComponent nie zmienia 'znaku. Częstym błędem jest używanie go do tworzenia atrybutów HTML, takich jak href='MyUrl', które mogą cierpieć z powodu błędu wstrzykiwania. Jeśli konstruujesz HTML z ciągów znaków, użyj "zamiast 'cudzysłowów atrybutów lub dodaj dodatkową warstwę kodowania ( 'może być zakodowana jako% 27).

Aby uzyskać więcej informacji na temat tego rodzaju kodowania, możesz sprawdzić: http://en.wikipedia.org/wiki/Percent-encoding

Różnica między encodeURI()i encodeURIComponent()wynosi dokładnie 11 znaków zakodowanych przez encodeURIComponent, ale nie przez encodeURI:

Wygenerowałem tę tabelę z łatwością za pomocą console.table w Google Chrome z tym kodem:

var arr = [];
for(var i=0;i<256;i++) {
  var char=String.fromCharCode(i);
  if(encodeURI(char)!==encodeURIComponent(char)) {
    arr.push({
      character:char,
      encodeURI:encodeURI(char),
      encodeURIComponent:encodeURIComponent(char)
    });
  }
}
console.table(arr);

Znalazłem ten artykuł pouczający: JavaScript Madness: Query String Parsing

Znalazłem to, gdy próbowałem podkreślić i dlaczego decodeURIComponent nie dekodował poprawnie „+”. Oto wyciąg:

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!

encodeURIComponent nie koduje -_.!~*'(), co powoduje problem z wysyłaniem danych do php w ciągu xml.

Na przykład:
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>

Ogólna ucieczka z encodeURI
%3Cxml%3E%3Ctext%20x=%22100%22%20y=%22150%22%20value=%22It's%20a%20value%20with%20single%20quote%22%20/%3E%20%3C/xml%3E

Widzisz, pojedynczy cytat nie jest zakodowany. Aby rozwiązać problem, stworzyłem dwie funkcje rozwiązania problemu w moim projekcie, dla Kodowania adresu 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");
}

W przypadku dekodowania adresu 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 "";
}

encodeURI () - funkcja escape () służy do zmiany znaczenia javascript, a nie HTTP.

Mała tabela porównawcza Java vs. JavaScript vs. PHP.

1. Java URLEncoder.encode (using UTF8 charset)
2. JavaScript encodeURIComponent
3. JavaScript escape
4. PHP urlencode
5. PHP rawurlencode

char   JAVA JavaScript --PHP---
[ ]     +    %20  %20  +    %20
[!]     %21  !    %21  %21  %21
[*]     *    *    *    %2A  %2A
[']     %27  '    %27  %27  %27 
[(]     %28  (    %28  %28  %28
[)]     %29  )    %29  %29  %29
[;]     %3B  %3B  %3B  %3B  %3B
[:]     %3A  %3A  %3A  %3A  %3A
[@]     %40  %40  @    %40  %40
[&]     %26  %26  %26  %26  %26
[=]     %3D  %3D  %3D  %3D  %3D
[+]     %2B  %2B  +    %2B  %2B
[$]     %24  %24  %24  %24  %24
[,]     %2C  %2C  %2C  %2C  %2C
[/]     %2F  %2F  /    %2F  %2F
[?]     %3F  %3F  %3F  %3F  %3F
[#]     %23  %23  %23  %23  %23
[[]     %5B  %5B  %5B  %5B  %5B
[]]     %5D  %5D  %5D  %5D  %5D
----------------------------------------
[~]     %7E  ~    %7E  %7E  ~
[-]     -    -    -    -    -
[_]     _    _    _    _    _
[%]     %25  %25  %25  %25  %25
[\]     %5C  %5C  %5C  %5C  %5C
----------------------------------------
char  -JAVA-  --JavaScript--  -----PHP------
[ä]   %C3%A4  %C3%A4  %E4     %C3%A4  %C3%A4
[ф]   %D1%84  %D1%84  %u0444  %D1%84  %D1%84

Zalecam, aby nie używać takiej metody, jaka jest. Napisz swoją własną funkcję, która działa poprawnie.

MDN podał dobry przykład kodowania adresów URL pokazany poniżej.

var fileName = 'my file(2).txt';
var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName);

console.log(header); 
// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"


function encodeRFC5987ValueChars (str) {
    return encodeURIComponent(str).
        // Note that although RFC3986 reserves "!", RFC5987 does not,
        // so we do not need to escape it
        replace(/['()]/g, escape). // i.e., %27 %28 %29
        replace(/\*/g, '%2A').
            // The following are not required for percent-encoding per RFC5987, 
            //  so we can allow for a little better readability over the wire: |`^
            replace(/%(?:7C|60|5E)/g, unescape);
}

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

Pamiętaj również, że wszystkie kodują różne zestawy znaków i odpowiednio wybierz ten, którego potrzebujesz. encodeURI () koduje mniej znaków niż encodeURIComponent (), który koduje mniej (a także inaczej niż w punkcie Dannypa) znaków niż escape ().

W celu kodowania javascript ma trzy wbudowane funkcje -

1. escape()- nie koduje @*/+ Ta metoda jest przestarzała po ECMA 3, dlatego należy jej unikać.

2. encodeURI()- nie koduje ~!@#$&*()=:/,;?+' Zakłada, że ​​URI jest pełnym URI, więc nie koduje znaków zastrzeżonych, które mają specjalne znaczenie w URI. Ta metoda jest używana, gdy celem jest konwersja pełnego adresu URL zamiast jakiegoś specjalnego segmentu adresu URL. Przykład - encodeURI('http://stackoverflow.com'); da - http://stackoverflow.com

3. encodeURIComponent()- nie koduje - _ . ! ~ * ' ( ) Ta funkcja koduje składnik Uniform Resource Identifier (URI), zastępując każdą instancję niektórych znaków jedną, dwiema, trzema lub czterema sekwencjami ucieczki reprezentującymi kodowanie UTF-8 znaku. Tej metody należy użyć do konwersji składnika adresu URL. Na przykład należy dołączyć dane wejściowe użytkownika Przykład - encodeURIComponent('http://stackoverflow.com'); da - http% 3A% 2F% 2Fstackoverflow.com

Całe to kodowanie odbywa się w UTF 8, tzn. Znaki zostaną przekonwertowane w formacie UTF-8.

encodeURIComponent różni się od encodeURI tym, że koduje znaki zastrzeżone i znak numeryczny # encodeURI

Przekonałem się, że eksperymentowanie z różnymi metodami jest dobrym sprawdzianem zdrowia psychicznego, nawet jeśli dobrze rozumiesz, jakie są ich różne zastosowania i możliwości.

W tym celu uważam, że ta strona internetowa jest niezwykle przydatna do potwierdzenia moich podejrzeń, że robię coś odpowiednio. Okazało się także przydatne do dekodowania łańcucha znaków encodeURIComponent, którego interpretacja może być trudna. Świetna zakładka do:

http://www.the-art-of-web.com/javascript/escape/

Przyjęta odpowiedź jest dobra. Aby rozszerzyć ostatnią część:

Zauważ, że encodeURIComponent nie zmienia znaku „. Częstym błędem jest używanie go do tworzenia atrybutów HTML, takich jak href = 'MyUrl', które mogą zostać uszkodzone przez błąd wstrzykiwania. Jeśli konstruujesz HTML z ciągów, użyj „zamiast” dla cudzysłowów atrybutów lub dodaj dodatkową warstwę kodowania („może być zakodowany jako% 27).

Jeśli chcesz być bezpieczny, należy również zakodować procent kodowania niezarezerwowanych znaków .

Możesz użyć tej metody, aby je uciec (źródło Mozilla )

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

// fixedEncodeURIComponent("'") --> "%27"

Współczesne przepisanie odpowiedzi @ johann-echavarria:

console.log(
    Array(256)
        .fill()
        .map((ignore, i) => String.fromCharCode(i))
        .filter(
            (char) =>
                encodeURI(char) !== encodeURIComponent(char)
                    ? {
                          character: char,
                          encodeURI: encodeURI(char),
                          encodeURIComponent: encodeURIComponent(char)
                      }
                    : false
        )
)

Lub jeśli można użyć tabeli, należy wymienić console.logz console.table(na wyjściu ładniejszej).

Zainspirowany stołem Johanna postanowiłem go przedłużyć. Chciałem zobaczyć, które znaki ASCII zostaną zakodowane.

var ascii = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";

var encoded = [];

ascii.split("").forEach(function (char) {
    var obj = { char };
    if (char != encodeURI(char))
        obj.encodeURI = encodeURI(char);
    if (char != encodeURIComponent(char))
        obj.encodeURIComponent = encodeURIComponent(char);
    if (obj.encodeURI || obj.encodeURIComponent)
        encoded.push(obj);
});

console.table(encoded);

Tabela pokazuje tylko zakodowane znaki. Puste komórki oznaczają, że oryginalne i zakodowane znaki są takie same.

Wystarczy być ekstra, Dodaję kolejny tabeli urlencode()kontra rawurlencode(). Jedyną różnicą wydaje się być kodowanie znaku spacji.

<script>
<?php
$ascii = str_split(" !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~", 1);
$encoded = [];
foreach ($ascii as $char) {
    $obj = ["char" => $char];
    if ($char != urlencode($char))
        $obj["urlencode"] = urlencode($char);
    if ($char != rawurlencode($char))
        $obj["rawurlencode"] = rawurlencode($char);
    if (isset($obj["rawurlencode"]) || isset($obj["rawurlencode"]))
        $encoded[] = $obj;
}
echo "var encoded = " . json_encode($encoded) . ";";
?>
console.table(encoded);
</script>

Mam tę funkcję ...

var escapeURIparam = function(url) {
    if (encodeURIComponent) url = encodeURIComponent(url);
    else if (encodeURI) url = encodeURI(url);
    else url = escape(url);
    url = url.replace(/\+/g, '%2B'); // Force the replacement of "+"
    return url;
};