Ruang html ditampilkan sebagai% 2520, bukan% 20

109

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?

Eric Leschinski
sumber

Jawaban:

219

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.
Nick Andriopoulos
sumber
1
Hexblot sebenarnya benar di sini. Biasanya ini terjadi ketika Anda sedang mengkodekan url Anda dengan pemrograman, dan bot masuk dan mengkodekannya untuk kedua kalinya. Bot memiliki kebiasaan buruk melakukan ini. Ada dua orang yang bisa Anda tangani masalah ini. 1) Anda dapat 404 atau 401 dengan pengecualian coba tangkap atau Anda dapat menulis fungsi kecil yang akan mendekode nilai ganda yang didekodekan sebelum Anda menyerahkannya ke metode lain untuk logika bisnis.
Ryan Watts
Ini membantu saya mencari tahu mengapa saya mendapatkannya saat mengirim permintaan jQuery ajax. Saya mengatur atribut data dalam permintaan GET ajax dengan fungsi encodeURIComponent pada nilainya, tetapi jQuery sudah melakukannya secara default, oleh karena itu mengapa saya mendapatkan% 2520. Terima kasih sangat membantu.
Asyer
Apakah tidak ada argumen baris perintah untuk chrome untuk memberitahunya apakah menafsirkan atau tidak menafsirkan tautan?
AleX_
Saya memiliki http://mysite/test & that... If I use UrlEncode` yang berubah menjadi http://mysite/test%20&%20thattetapi saya juga ingin &mengubahnya ke% 26 juga jadi itu adalah situs saya / tes% 20% 26% 20that `Bagaimana saya bisa melakukannya?
Si8
10

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

hek2mgl
sumber
Saya mendapat masalah yang sama tetapi saya tidak mengerti mengapa urlencoding default diproses dua kali pada saat pertama.
jungwon jin
Bergantung pada situasinya, pengkodean ganda mungkin merupakan hasil yang sangat valid dari penggunaan pengkodean dengan benar. Jawaban ini dapat menimbulkan kesan bahwa pengkodean ganda selalu salah, dan Anda dapat memperbaiki masalah pengkodean dengan menambahkan sebanyak mungkin panggilan encode / unencode untuk "membuatnya berfungsi". Ini salah, dan beginilah bug encoding pertama kali muncul. -1
Florian Winter
@FlorianWinter Saya tidak benar-benar melihat di mana Anda membaca ini yang tersirat. Bisakah Anda membantu saya? (Harap baca pertanyaan dan jawaban saya)
hek2mgl
7

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

Eric Leschinski
sumber
0

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.

Subrata Sarkar
sumber
1
Saya berasumsi karena Anda tidak menyelesaikan masalah, hanya menutupinya - akar penyebabnya masih ada di suatu tempat, dan Anda melakukan pekerjaan ganda (di suatu tempat Anda secara tidak sengaja menyandikan dua kali, dan di tempat lain Anda mendekode secara manual untuk menutupi itu). Dengan asumsi Anda ingin melakukan sesuatu "dengan benar", hal terbaik adalah melakukan debug dan menemukan pelakunya yang sebenarnya.
Nick Andriopoulos
Sebenarnya solusinya berhasil untuk saya di mana pun saya mendapatkan masalah ini. Jadi saya memposting.
Subrata Sarkar
2
@NiladriSarkar apa yang hexbolt coba katakan adalah bahwa sementara kode Anda berfungsi, itu bukan solusi yang layak, melainkan perbaikan kotor, dan harus dihindari ...
Lihat
-1

Coba ini?

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

Hopefulee
sumber
1
Selamat datang di StackOverflow! Umumnya jawaban lebih berguna jika mereka menyertakan beberapa penjelasan tentang mengapa saran Anda akan memecahkan masalah OP, bukan hanya potongan kode. Selain itu, karena pertanyaan ini sudah memiliki jawaban yang dapat diterima, ada baiknya untuk menambahkan beberapa penjelasan mengapa jawaban Anda lebih benar daripada jawaban itu.
DaveyDaveDave