Ruang html ditampilkan sebagai% 2520, bukan% 20

Meneruskan nama file ke browser firefox menyebabkannya mengganti spasi dengan, %2520 bukan %20.

Saya memiliki HTML berikut dalam sebuah file bernama myhtml.html:

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

Saat saya memuat myhtml.htmlke firefox, gambar muncul sebagai gambar rusak. Jadi saya klik kanan tautan untuk melihat gambar dan itu menunjukkan URL yang dimodifikasi ini:

file:///c:/Documents%2520and%2520Settings/screenshots/Image01.png
                    ^
                    ^-----Firefox changed my space to %2520.

Apa apaan? Ini mengubah ruang saya menjadi %2520. Bukankah seharusnya itu mengubahnya menjadi %20?

Bagaimana cara mengubah file HTML ini agar browser dapat menemukan gambar saya? Apa yang terjadi di sini?

Sedikit penjelasan tentang apa itu %2520:

Karakter ruang umum dikodekan %20seperti yang Anda catat sendiri. The %karakter dikodekan sebagai %25.

Cara Anda mendapatkannya %2520adalah ketika url Anda sudah memiliki %20di dalamnya, dan mendapat kode url lagi, yang mengubah %20menjadi %2520.

Apakah Anda (atau kerangka kerja apa pun yang mungkin Anda gunakan) karakter pengkodean ganda?

Edit: Perluas sedikit tentang ini, terutama untuk tautan LOKAL . Dengan asumsi Anda ingin menautkan ke sumber daya C:\my path\my file.html:

• Jika Anda hanya menyediakan jalur file lokal, browser diharapkan untuk menyandikan dan melindungi semua karakter yang diberikan (di atas, Anda harus memberikannya dengan spasi seperti yang ditunjukkan, karena %merupakan karakter nama file yang valid dan karenanya akan dikodekan) saat mengonversi ke URL yang tepat (lihat poin berikutnya).
• jika Anda memberikan URL dengan file://protokol, pada dasarnya Anda menyatakan bahwa Anda telah mengambil semua tindakan pencegahan dan menyandikan apa yang perlu dikodekan, sisanya harus diperlakukan sebagai karakter khusus. Dalam contoh di atas, Anda harus menyediakan file:///c:/my%20path/my%20file.html. Selain memperbaiki garis miring, klien tidak boleh menyandikan karakter di sini.

CATATAN:

• Arah garis miring - garis miring ke depan /digunakan di URL, garis miring terbalik \di jalur Windows, tetapi sebagian besar klien akan bekerja dengan keduanya dengan mengubahnya menjadi garis miring yang tepat.
• Selain itu, ada 3 garis miring setelah nama protokol, karena Anda secara diam-diam merujuk ke mesin saat ini alih-alih host jarak jauh (jalur lengkap yang tidak disingkat akan menjadi file://localhost/c:/my%20path/my%file.html), tetapi sekali lagi sebagian besar klien akan bekerja tanpa bagian host (yaitu dua garis miring saja ) dengan asumsi yang Anda maksud adalah mesin lokal dan menambahkan garis miring ketiga.

Untuk beberapa alasan - mungkin valid - url dikodekan dua kali. %25adalah %tanda kode url . Jadi url aslinya terlihat seperti:

http://server.com/my path/

Kemudian itu mendapat urlencode sekali:

http://server.com/my%20path/

dan dua kali:

http://server.com/my%2520path/

Jadi, Anda tidak boleh melakukan urlencoding - dalam kasus Anda - karena komponen lain sepertinya sudah melakukannya untuk Anda. Gunakan spasi

Ketika Anda mencoba mengunjungi nama file lokal melalui browser firefox, Anda harus memaksa file:\\\protokol ( http://en.wikipedia.org/wiki/File_URI_scheme ) atau firefox akan menyandikan ruang Anda DUA KALI. Ubah cuplikan html dari ini:

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

untuk ini:

<img src="file:\\\C:\Documents and Settings\screenshots\Image01.png"/>

atau ini:

<img src="file://C:\Documents and Settings\screenshots\Image01.png"/>

Kemudian firefox diberi tahu bahwa ini adalah nama file lokal, dan ini membuat gambar dengan benar di browser, dengan benar mengkodekan string sekali.

Tautan yang berguna : http://support.mozilla.org/en-US/questions/900466

Potongan kode berikut menyelesaikan masalah saya. Pikir ini mungkin berguna untuk orang lain.

var strEnc = this.$.txtSearch.value.replace(/\s/g, "-");
strEnc = strEnc.replace(/-/g, " ");

Alih-alih menggunakan default, encodeURIComponentbaris pertama kode saya mengubah semua spacesmenjadi hyphensmenggunakan pola regex /\s\gdan baris berikut hanya melakukan kebalikannya, yaitu mengubah semua hyphenskembali spacesmenggunakan yang lain regex pattern /-/g. Di sini /gsebenarnya bertanggung jawab untuk finding allmencocokkan karakter.

Saat saya mengirimkan nilai ini ke panggilan Ajax saya, nilai ini akan dilintasi sebagai normal spacesatau hanya %20dan dengan demikian akan dihapus double-encoding.

Coba ini?

encodeURIComponent('space word').replace(/%20/g,'+')