Saat menyandikan string kueri untuk dikirim ke server web - kapan Anda menggunakan escape()
dan kapan Anda menggunakan encodeURI()
atau encodeURIComponent()
:
Gunakan melarikan diri:
escape("% +&=");
ATAU
gunakan encodeURI () / encodeURIComponent ()
encodeURI("http://www.google.com?var1=value1&var2=value2");
encodeURIComponent("var1=value1&var2=value2");
encodeURIComponent("var1=value1&var2=value2")
ini bukan kasus penggunaan biasa. Contoh itu akan menyandikan=
dan&
, yang mungkin bukan yang dimaksudkan!encodeURIComponent
biasanya diterapkan secara terpisah untuk hanya nilai di setiap pasangan nilai kunci (bagian setelah masing-masing=
).var params = encodeURIComponent(key) + '=' + encodeURIComponent(value);
- Mungkin orang lain tahu cara yang lebih baik.Jawaban:
melarikan diri()
Jangan gunakan itu!
escape()
didefinisikan dalam bagian B.2.1.2 melarikan diri dan teks pengantar Lampiran B mengatakan:Tingkah laku:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape
Karakter khusus dikodekan dengan pengecualian: @ * _ + -. /
Bentuk heksadesimal untuk karakter, yang kode unit nilai adalah 0xFF atau kurang, adalah urutan escape dua-digit:
%xx
.Untuk karakter dengan unit kode yang lebih besar, format empat digit
%uxxxx
digunakan. Ini tidak diperbolehkan dalam string kueri (seperti yang didefinisikan dalam RFC3986 ):Tanda persen hanya dibolehkan jika diikuti langsung oleh dua hexdigit, persen diikuti oleh
u
tidak diizinkan.encodeURI ()
Gunakan encodeURI saat Anda menginginkan URL yang berfungsi. Lakukan panggilan ini:
mendapatkan:
Jangan panggil komponen encodeURIC karena akan menghancurkan URL dan kembali
komponen encodeURIC ()
Gunakan komponen encodeURIC ketika Anda ingin menyandikan nilai parameter URL.
Maka Anda dapat membuat URL yang Anda butuhkan:
Dan Anda akan mendapatkan URL lengkap ini:
http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55¶m2=99
Perhatikan bahwa komponen encodeURIC tidak lepas dari
'
karakter. Bug yang umum adalah menggunakannya untuk membuat atribut html sepertihref='MyUrl'
, yang dapat mengalami bug injeksi. Jika Anda membuat html dari string, gunakanlah"
alih-alih'
untuk kutipan atribut, atau tambahkan lapisan pengkodean tambahan ('
dapat dikodekan sebagai% 27).Untuk informasi lebih lanjut tentang jenis pengkodean ini, Anda dapat memeriksa: http://en.wikipedia.org/wiki/Percent-encoding
sumber
'
dengan'
) sebelum ditempatkan dalam dokumen HTML.Perbedaan antara
encodeURI()
danencodeURIComponent()
persis 11 karakter yang dikodekan oleh encodeURICon tetapi tidak oleh encodeURI:Saya membuat tabel ini dengan mudah dengan console.table di Google Chrome dengan kode ini:
sumber
var arr=[]; for(var i=0;i<256;i++){var char=String.fromCharCode(i); if(encodeURI(char)!==encodeURIComponent(char)) console.log("character: "+char + " | encodeURI: " +encodeURI(char) + " |encodeURIComponent: " + encodeURIComponent(char) ) }
Saya menemukan artikel ini mencerahkan: Javascript Madness: Query String Parsing
Saya menemukannya ketika saya mencoba untuk menjelaskan mengapa komponen decodeURIC tidak mendekode '+' dengan benar. Berikut ini ekstraknya:
sumber
encodeURI
sepertinya hanya berguna dalam kasus tepi yang cukup jelas dan benar-benar tidak perlu ada. Saya memiliki beberapa perbedaan pendapat dengannya, tetapi saya tidak melihat ada sesuatu yang keliru atau bodoh di sana. Apa yang sebenarnya Anda pikirkan adalah omong kosong?enctype
atribut dariFORM
menspesifikasikan elemen jenis konten yang digunakan untuk mengkodekan data formulir yang ditetapkan untuk penyerahan ke server. application / x-www-form-urlencoded Ini adalah tipe konten default. Formulir yang dikirimkan dengan tipe konten ini harus dikodekan sebagai berikut: [...] Karakter spasi diganti dengan `` + ', dan [...] Karakter non-alfanumerik diganti oleh `% HH', [...] Ref: HTML4 SepcencodeURIComponent tidak menyandikan
-_.!~*'()
, menyebabkan masalah dalam memposting data ke php dalam xml string.Sebagai contoh:
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>
Pelarian bersama
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
Anda bisa lihat, kutipan tunggal tidak dikodekan. Untuk mengatasi masalah, saya membuat dua fungsi untuk menyelesaikan masalah di proyek saya, untuk Encoding URL:
Untuk URL Dekode:
sumber
encodeURI () - fungsi escape () adalah untuk meloloskan javascript, bukan HTTP.
sumber
var url = "http://kuler-api.adobe.com/rss/get.cfm?startIndex=0&itemsPerPage=20&timeSpan=0&listType=rating"
... Dan saya ingin mengaksesnya melalui Google Ajax API, seperti ini:var gurl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + url;
... maka saya harus menggunakanescape(url)
.encodeURI(url)
sepertinya tidak berfungsi dengan parameter seperti itu.Tabel perbandingan kecil Java vs JavaScript vs PHP.
sumber
Saya sarankan untuk tidak menggunakan salah satu metode tersebut apa adanya. Tulis fungsi Anda sendiri yang melakukan hal yang benar.
MDN telah memberikan contoh yang baik tentang penyandian url yang ditunjukkan di bawah ini.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
sumber
Juga ingat bahwa mereka semua menyandikan serangkaian karakter yang berbeda, dan pilih yang Anda butuhkan dengan tepat. encodeURI () mengkodekan karakter lebih sedikit daripada encodeURIComponent (), yang mengkodekan lebih sedikit (dan juga berbeda, ke titik dannyp's) karakter daripada escape ().
sumber
Untuk tujuan pengkodean javascript telah memberikan tiga fungsi bawaan -
escape()
- tidak menyandikan@*/+
Metode ini sudah usang setelah ECMA 3 sehingga harus dihindari.encodeURI()
- tidak mengkodekan~!@#$&*()=:/,;?+'
Ini mengasumsikan bahwa URI adalah URI yang lengkap, jadi jangan menyandikan karakter yang dipesan yang memiliki arti khusus dalam URI. Metode ini digunakan ketika tujuannya adalah untuk mengkonversi URL lengkap alih-alih beberapa segmen URL khusus. Contoh -encodeURI('http://stackoverflow.com');
akan memberikan - http://stackoverflow.comencodeURIComponent()
- tidak mengkodekan- _ . ! ~ * ' ( )
Fungsi ini mengkodekan komponen Uniform Resource Identifier (URI) dengan mengganti setiap instance karakter tertentu dengan satu, dua, tiga, atau empat sekuens escape yang mewakili pengkodean karakter UTF-8. Metode ini harus digunakan untuk mengonversi komponen URL. Misalnya beberapa input pengguna perlu ditambahkan. Contoh -encodeURIComponent('http://stackoverflow.com');
akan memberikan - http% 3A% 2F% 2Fstackoverflow.comSemua pengkodean ini dilakukan dalam UTF 8 yaitu karakter akan dikonversi dalam format UTF-8.
encodeURIComponent berbeda dari encodeURI dalam encodeUR karakter yang dilindungi undang-undang dan tanda Nomor # dari encodeURI
sumber
Saya telah menemukan bahwa bereksperimen dengan berbagai metode adalah pemeriksaan kewarasan yang baik bahkan setelah memiliki pegangan yang baik tentang berbagai kegunaan dan kemampuan mereka.
Menjelang akhir itu saya menemukan situs web ini sangat berguna untuk mengkonfirmasi kecurigaan saya bahwa saya melakukan sesuatu dengan tepat. Ini juga terbukti berguna untuk mendekode string yang dikompilasi oleh encodeURIC yang agak sulit ditafsirkan. Bookmark yang bagus untuk dimiliki:
http://www.the-art-of-web.com/javascript/escape/
sumber
Jawaban yang diterima bagus. Untuk memperluas pada bagian terakhir:
Jika Anda ingin berada di sisi yang aman, persen pengkodean karakter tanpa syarat harus dikodekan juga.
Anda dapat menggunakan metode ini untuk menghindarinya (sumber Mozilla )
sumber
Penulisan ulang modern jawaban @ johann-echavarria:
Atau jika Anda bisa menggunakan tabel, ganti
console.log
denganconsole.table
(untuk hasil yang lebih cantik).sumber
Terinspirasi oleh meja Johann , saya telah memutuskan untuk memperpanjang meja. Saya ingin melihat karakter ASCII mana yang dikodekan.
Tampilkan cuplikan kode
Tabel hanya menunjukkan karakter yang disandikan. Sel kosong berarti bahwa karakter asli dan yang disandikan adalah sama.
Hanya untuk menjadi ekstra, saya menambahkan meja lain untuk
urlencode()
vsrawurlencode()
. Satu-satunya perbedaan tampaknya adalah pengkodean karakter ruang.sumber
Saya memiliki fungsi ini ...
sumber
encodeURI
tidak ada tetapiescape
ada.