encodeURI () - функция escape () предназначена для экранирования JavaScript, а не HTTP.

Также помните, что все они кодируют разные наборы символов, и выберите нужный вам. encodeURI () кодирует меньше символов, чем encodeURIComponent (), которая кодирует меньше (и тоже отличается от точки dannyp) символов, чем escape ().

побег()

Не используйте это! escape() определен в разделе В.2.1.2 побег, а вводный текст приложения B говорит:

... All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. ...
... Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code....

Поведение:

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

Специальные символы кодируются за исключением: @ * _ + -. /

Шестнадцатеричная форма для символов, значение кодовой единицы которых 0xFF или меньше, представляет собой двузначную escape-последовательность: %xx.

Для символов с большей кодовой единицей используется четырехзначный формат %uxxxx. Это запрещено в строке запроса (как определено в RFC3986):

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

Знак процента разрешен только в том случае, если за ним непосредственно следуют две шестнадцатеричные цифры, процент, за которым следует u, не допускается.

encodeURI ()

Используйте encodeURI, если вам нужен рабочий URL. Сделайте этот звонок:

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

получить:

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

Не вызывайте encodeURIComponent, так как это уничтожит URL-адрес и вернет

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

Обратите внимание, что encodeURI, как и encodeURIComponent, не экранирует символ '.

encodeURIComponent ()

Используйте encodeURIComponent, если вы хотите закодировать значение параметра URL.

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

Затем вы можете создать нужный URL:

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

И вы получите этот полный URL:

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

Обратите внимание, что encodeURIComponent не экранирует символ '. Распространенной ошибкой является использование его для создания атрибутов html, таких как href='MyUrl', которые могут иметь ошибку внедрения. Если вы создаете html из строк, используйте " вместо ' для кавычек атрибутов или добавьте дополнительный уровень кодирования (' может быть закодирован как% 27).

Для получения дополнительной информации об этом типе кодирования вы можете проверить: http://en.wikipedia.org/wiki/Percent-encoding

Я нашел эту статью поучительной: Безумие Javascript: синтаксический анализ строки запроса

Я обнаружил это, когда пытался понять, почему decodeURIComponent некорректно декодирует '+'. Вот выдержка:

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 не кодирует -_.!~*'(), что вызывает проблемы с отправкой данных на php в строке xml.

Например:
<xml><text x = "100" y = "150" value = "It's a value with single quote" /> </xml>

Общий побег с 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

Как видите, одинарные кавычки не кодируются. Чтобы решить проблему, я создал две функции для решения проблемы в моем проекте для 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");
}

Для 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 "";
}

У меня есть эта функция ...

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;
};

Я обнаружил, что экспериментирование с различными методами - это хорошая проверка работоспособности, даже если хорошо разбираться в их различных применениях и возможностях.

С этой целью я обнаружил, что этот сайт чрезвычайно полезен для подтверждения моих подозрений в том, что я что-то делаю надлежащим образом. Он также оказался полезным для декодирования строки с encodeURIComponent, которую может быть довольно сложно интерпретировать. Отличная закладка, чтобы иметь:

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

Я рекомендую не использовать один из этих методов как есть. Напишите свою собственную функцию, которая работает правильно.

MDN предоставил хороший пример кодировки URL, показанный ниже.

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

console.info(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

Разница между encodeURI() и encodeURIComponent() составляет ровно 11 символов, кодированных encodeURIComponent, но не encodeURI:

Я легко сгенерировал эту таблицу с помощью console.table в Google Chrome с помощью этого кода:

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);

Небольшая сравнительная таблица Java, JavaScript и 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

Для кодирования javascript предоставил три встроенные функции:

1. escape() - не кодирует @*/+ Этот метод устарел после ECMA 3, поэтому его следует избегать.

2. encodeURI() - не кодирует ~!@#$&*()=:/,;?+' Он предполагает, что URI является полным URI, поэтому не кодирует зарезервированные символы, которые имеют особое значение в URI. Этот метод используется, когда целью является преобразование полного URL-адреса вместо некоторого специального сегмента URL-адреса. Пример - encodeURI('http://stackoverflow.com'); даст - http://stackoverflow.com

3. encodeURIComponent() - не кодирует - _ . ! ~ * ' ( ) Эта функция кодирует компонент универсального идентификатора ресурса (URI), заменяя каждый экземпляр определенных символов одной, двумя, тремя или четырьмя escape-последовательностями, представляющими кодировку символа UTF-8. Этот метод следует использовать для преобразования компонента URL. Например, необходимо добавить некоторый пользовательский ввод Пример - encodeURIComponent('http://stackoverflow.com'); даст - http% 3A% 2F% 2Fstackoverflow.com

Вся эта кодировка выполняется в UTF 8, т.е. символы будут преобразованы в формат UTF-8.

encodeURIComponent отличается от encodeURI тем, что кодирует зарезервированные символы и числовой знак # encodeURI

Принятый ответ хорош. Чтобы продолжить последнюю часть:

Note that encodeURIComponent does not escape the ' character. A common bug is to use it to create html attributes such as href='MyUrl', which could suffer an injection bug. If you are constructing html from strings, either use " instead of ' for attribute quotes, or add an extra layer of encoding (' can be encoded as %27).

Если вы хотите быть в безопасности, процент кодирования незарезервированных символов также следует закодировать.

Вы можете использовать этот метод, чтобы избежать их (источник Mozilla)

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

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

Современная переработка ответа @johann-echavarria:

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

Или, если вы можете использовать таблицу, замените console.info на console.table (для более красивого вывода).

Вдохновленный Стол Иоганна, я решил расширить таблицу. Я хотел посмотреть, какие символы ASCII кодируются.

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);

В таблице показаны только закодированные символы. Пустые ячейки означают, что исходный и закодированный символы совпадают.

Чтобы быть дополнительным, я добавляю еще одну таблицу для urlencode() vs rawurlencode(). Единственная разница, похоже, заключается в кодировке символа пробела.

<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>

Попробуйте сами encodeURI() и encodeURIComponent() ...

console.info(encodeURIComponent('@#$%^&*'));

Ввод: @#$%^&*. Выход: %40%23%24%25%5E%26*. Итак, подождите, что случилось с *? Почему это не было обращено? Это определенно может вызвать проблемы, если вы попытаетесь сделать linux command "$string". TL; DR: вам действительно нужны fixedEncodeURIComponent() и fixedEncodeURI(). Длинная история...

Когда использовать encodeURI()? Никогда. encodeURI() не соответствует RFC3986 в отношении кодирования скобок. Используйте fixedEncodeURI(), как определено и более подробно описано в Документация MDN encodeURI () ...

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

Когда использовать encodeURIComponent()? Никогда. encodeURIComponent() не соответствует RFC3986 в отношении кодировки: !'()*. Используйте fixedEncodeURIComponent(), как определено и подробно описано в Документация MDN encodeURIComponent () ...

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

Затем вы можете использовать fixedEncodeURI() для кодирования одного фрагмента URL, тогда как fixedEncodeURIComponent() будет кодировать фрагменты URL и соединители; или просто fixedEncodeURI() не будет кодировать +@?=:#;,$& (поскольку & и + являются общими операторами URL), но fixedEncodeURIComponent() будет.