เมื่อเข้ารหัสสตริงการสืบค้นที่จะส่งไปยังเว็บเซิร์ฟเวอร์ - เมื่อใดที่คุณใช้escape()และเมื่อใดที่คุณจะใช้encodeURI()หรือencodeURIComponent():

ใช้หลบหนี:

escape("% +&=");

หรือ

ใช้ encodeURI () / encodeURIComponent ()

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

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

หนี()

อย่าใช้มัน! escape()มีการกำหนดไว้ในส่วนB.2.1.2 การหลบหนีและข้อความแนะนำของภาคผนวก Bพูดว่า:

... คุณสมบัติและพฤติกรรมภาษาทั้งหมดที่ระบุในภาคผนวกนี้มีลักษณะที่ไม่พึงประสงค์ตั้งแต่หนึ่งข้อขึ้นไปและหากไม่มีการใช้งานแบบดั้งเดิมจะถูกลบออกจากข้อกำหนดนี้ ...
... โปรแกรมเมอร์ไม่ควรใช้หรือสันนิษฐานว่ามีคุณสมบัติและพฤติกรรมเหล่านี้เมื่อเขียนรหัส ECMAScript ใหม่ ....

พฤติกรรม:

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

อักขระพิเศษมีการเข้ารหัสยกเว้น: @ * _ + -. /

รูปแบบเลขฐานสิบหกสำหรับตัวอักษรที่มีโค้ดหน่วยค่า 0xFF %xxหรือน้อยกว่าเป็นสองหลักลำดับหนี:

สำหรับตัวละครที่มีหน่วยรหัสมากขึ้น%uxxxxจะใช้รูปแบบตัวเลขสี่หลัก สิ่งนี้ไม่ได้รับอนุญาตภายในสตริงการสืบค้น (ตามที่กำหนดในRFC3986 ):

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

อนุญาตให้ใช้เครื่องหมายเปอร์เซนต์ได้ก็ต่อเมื่อมันถูกตามด้วย hexdigits สองตัวเท่านั้นuไม่อนุญาตให้ใช้เปอร์เซ็นต์

encodeURI ()

ใช้ encodeURI เมื่อคุณต้องการ URL ที่ใช้งานได้ โทรออกนี้:

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

ที่จะได้รับ:

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

อย่าเรียกใช้ encodeURIConent เพราะจะทำลาย URL และส่งคืน

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

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

ความแตกต่างระหว่าง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);

ฉันพบบทความนี้ enlightening: Javascript Madness: Query String Parsing

ฉันพบว่าเมื่อฉันพยายามขีดเส้นใต้ว่าทำไม 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 "";
}

encodeURI () - ฟังก์ชั่น escape () สำหรับการหลบหนี javascript ไม่ใช่ HTTP

ตารางเปรียบเทียบขนาดเล็กกับ Java เทียบกับจาวาสคริปต์กับ 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

ฉันไม่แนะนำให้ใช้วิธีใดวิธีหนึ่งตามที่เป็นอยู่ เขียนฟังก์ชั่นของคุณเองซึ่งทำสิ่งที่ถูกต้อง

MDN ให้ตัวอย่างที่ดีเกี่ยวกับการเข้ารหัส URL ที่แสดงด้านล่าง

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

โปรดจำไว้ว่าพวกเขาทั้งหมดเข้ารหัสชุดอักขระที่แตกต่างกันและเลือกชุดอักขระที่คุณต้องการอย่างเหมาะสม encodeURI () เข้ารหัสอักขระน้อยกว่า encodeURIComponent () ซึ่งเข้ารหัสอักขระ (และยังแตกต่างกันไปยังจุดของ dannyp) น้อยกว่า escape ()

สำหรับวัตถุประสงค์ในการเข้ารหัสจาวาสคริปต์นั้นมีฟังก์ชั่น inbuilt สามฟังก์ชัน -

1. escape()- ไม่เข้ารหัส@*/+ วิธีนี้เลิกใช้หลังจาก ECMA 3 ดังนั้นควรหลีกเลี่ยง

2. encodeURI()- ไม่เข้ารหัส~!@#$&*()=:/,;?+' มันถือว่า URI เป็น URI ที่สมบูรณ์ดังนั้นจึงไม่เข้ารหัสอักขระที่สงวนไว้ซึ่งมีความหมายพิเศษใน URI วิธีนี้จะใช้เมื่อมีเจตนาที่จะแปลง URL ที่สมบูรณ์แทนส่วนพิเศษบางส่วนของ URL ตัวอย่าง - encodeURI('http://stackoverflow.com'); จะให้ - http://stackoverflow.com

3. encodeURIComponent()- ไม่เข้ารหัส - _ . ! ~ * ' ( ) ฟังก์ชันนี้เข้ารหัสคอมโพเนนต์ Uniform Resource Identifier (URI) โดยแทนที่แต่ละอินสแตนซ์ของอักขระบางตัวด้วยลำดับการหลบหลีกหนึ่ง, สอง, สามหรือสี่ตัวแทนการเข้ารหัส UTF-8 ของอักขระ วิธีนี้ควรใช้ในการแปลงส่วนประกอบของ URL ตัวอย่างเช่นการป้อนข้อมูลของผู้ใช้บางส่วนจะต้องต่อท้ายตัวอย่าง - encodeURIComponent('http://stackoverflow.com'); จะให้ - http% 3A% 2F% 2Fstackoverflow.com

การเข้ารหัสทั้งหมดนี้ดำเนินการใน UTF 8 เช่นตัวละครจะถูกแปลงในรูปแบบ UTF-8

encodeURIC ประกอบด้วยความแตกต่างจาก encodeURI ซึ่งเข้ารหัสอักขระที่สงวนไว้และเครื่องหมายหมายเลข # ของ encodeURI

ฉันพบว่าการทดลองด้วยวิธีการต่าง ๆ เป็นการตรวจสุขภาพที่ดีแม้ว่าจะมีการจัดการที่ดีว่าการใช้และความสามารถต่างๆของพวกเขานั้นเป็นอย่างไร

ในตอนท้ายฉันพบเว็บไซต์นี้มีประโยชน์อย่างยิ่งในการยืนยันความสงสัยของฉันว่าฉันกำลังทำสิ่งที่เหมาะสม มันยังพิสูจน์แล้วว่ามีประโยชน์สำหรับการถอดรหัสสตริง encodeURIComponent'ed ซึ่งค่อนข้างท้าทายในการตีความ บุ๊กมาร์กที่ยอดเยี่ยมที่มี:

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

คำตอบที่ยอมรับได้ดี เพื่อขยายในส่วนสุดท้าย:

โปรดทราบว่า encodeURIComponent จะไม่สามารถใช้อักขระ ' ข้อผิดพลาดทั่วไปคือการใช้มันเพื่อสร้างคุณสมบัติ html เช่น href = 'MyUrl' ซึ่งอาจได้รับข้อผิดพลาดในการฉีด หากคุณกำลังสร้าง html จากสตริงให้ใช้ "แทน" สำหรับเครื่องหมายคำพูดของแอตทริบิวต์หรือเพิ่มเลเยอร์พิเศษของการเข้ารหัส ('สามารถเข้ารหัสเป็น% 27)

หากคุณต้องการให้อยู่ในด้านที่ปลอดภัยการเข้ารหัสเปอร์เซ็นต์อักขระที่ไม่ได้จองควรถูกเข้ารหัสเช่นกัน

คุณสามารถใช้วิธีนี้เพื่อหนีพวกเขา (แหล่งMozilla )

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

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

Modern rewrite ของคำตอบของ @ 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
        )
)

หรือถ้าคุณสามารถใช้ตารางให้แทนที่console.logด้วย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);

ตารางแสดงเฉพาะอักขระที่เข้ารหัส เซลล์ว่างหมายความว่าตัวละครเดิมและตัวเข้ารหัสเหมือนกัน

เพียงเพื่อจะเสริมฉันเพิ่มตารางอื่นสำหรับVSurlencode() 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>

ฉันมีฟังก์ชั่นนี้ ...

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