Không gian html đang hiển thị dưới dạng% 2520 thay vì% 20

Chuyển tên tệp vào trình duyệt firefox sẽ khiến nó thay thế khoảng trắng bằng %2520 thay vì %20.

Tôi có HTML sau trong một tệp có tên myhtml.html:

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

Khi tôi tải myhtml.htmlvào firefox, hình ảnh hiển thị dưới dạng hình ảnh bị hỏng. Vì vậy, tôi nhấp chuột phải vào liên kết để xem hình ảnh và nó hiển thị URL đã sửa đổi này:

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

Cái quái gì vậy? Nó đã chuyển đổi không gian của tôi thành một %2520. Không nên chuyển đổi nó thành a %20?

Làm cách nào để thay đổi tệp HTML này để trình duyệt có thể tìm thấy hình ảnh của tôi? Những gì đang xảy ra ở đây?

Giải thích một chút về điều đó %2520là:

Ký tự khoảng trắng chung được mã hóa %20như bạn đã tự lưu ý. Ký %tự được mã hóa dưới dạng %25.

Cách bạn nhận được %2520là khi url của bạn đã có %20trong đó và được urlenccode một lần nữa, điều này sẽ chuyển %20thành %2520.

Bạn có (hoặc bất kỳ khuôn khổ nào bạn có thể đang sử dụng) các ký tự mã hóa kép không?

Chỉnh sửa: Mở rộng một chút về điều này, đặc biệt là đối với các liên kết ĐỊA PHƯƠNG . Giả sử bạn muốn liên kết đến tài nguyên C:\my path\my file.html:

• nếu bạn chỉ cung cấp đường dẫn tệp cục bộ, trình duyệt dự kiến ​​sẽ mã hóa và bảo vệ tất cả các ký tự đã cho (ở phần trên, bạn nên cung cấp cho nó khoảng trống như được hiển thị, vì %là ký tự tên tệp hợp lệ và như vậy nó sẽ được mã hóa) khi chuyển đổi đến một URL thích hợp (xem điểm tiếp theo).
• nếu bạn cung cấp một URL với file://giao thức, về cơ bản bạn đang nói rằng bạn đã thực hiện tất cả các biện pháp phòng ngừa và mã hóa những gì cần mã hóa, phần còn lại nên được coi là các ký tự đặc biệt. Trong ví dụ trên, bạn nên cung cấp file:///c:/my%20path/my%20file.html. Ngoài việc sửa các dấu gạch chéo, máy khách không nên mã hóa các ký tự ở đây.

LƯU Ý:

• Hướng gạch chéo - dấu gạch chéo về phía trước /được sử dụng trong URL, dấu gạch chéo ngược \trong đường dẫn Windows, nhưng hầu hết các ứng dụng khách sẽ làm việc với cả hai bằng cách chuyển đổi chúng thành dấu gạch chéo về phía trước thích hợp.
• Ngoài ra, có 3 dấu gạch chéo sau tên giao thức, vì bạn đang âm thầm đề cập đến máy hiện tại thay vì máy chủ từ xa (đường dẫn không viết tắt đầy đủ sẽ là file://localhost/c:/my%20path/my%file.html), nhưng một lần nữa hầu hết các máy khách sẽ hoạt động mà không có phần máy chủ (tức là chỉ có hai dấu gạch chéo ) bằng cách giả sử ý bạn là máy cục bộ và thêm dấu gạch chéo thứ ba.

Đối với một số - có thể hợp lệ - lý do url được mã hóa hai lần. %25là %dấu hiệu urlencoded . Vì vậy, url ban đầu trông giống như:

http://server.com/my path/

Sau đó, nó đã được urlencodes một lần:

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

và hai lần:

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

Vì vậy, bạn không nên mã hóa urlencoding - trong trường hợp của bạn - vì các thành phần khác dường như đã có sẵn cho bạn. Chỉ sử dụng một không gian

Khi bạn đang cố gắng truy cập tên tệp cục bộ thông qua trình duyệt firefox, bạn phải buộc file:\\\giao thức ( http://en.wikipedia.org/wiki/File_URI_scheme ), nếu không firefox sẽ mã hóa không gian của bạn hai lần. Thay đổi đoạn mã html từ đoạn mã này:

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

đến điều này:

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

hoặc cái này:

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

Sau đó, firefox được thông báo rằng đây là tên tệp cục bộ và nó hiển thị hình ảnh chính xác trong trình duyệt, mã hóa chính xác chuỗi một lần.

Liên kết hữu ích: http://support.mozilla.org/en-US/questions/900466

Đoạn mã sau đã giải quyết vấn đề của tôi. Nghĩ rằng điều này có thể hữu ích cho những người khác.

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

Thay vì sử dụng mặc định, encodeURIComponentdòng mã đầu tiên của tôi đang chuyển đổi tất cả spacesthành hyphenssử dụng mẫu regex /\s\gvà dòng sau chỉ làm ngược lại, tức là chuyển đổi tất cả hyphenstrở lại spacessử dụng mẫu khác regex pattern /-/g. Ở đây /gthực sự chịu trách nhiệm về việc finding allkhớp các ký tự.

Khi tôi gửi giá trị này đến lệnh gọi Ajax của mình, nó sẽ truyền đi ngang normal spaceshoặc đơn giản %20và do đó bị loại bỏ double-encoding.

Thử cái này?

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