Cách mã hóa URL bằng JavaScript

Ví dụ: bạn có thể cần mã hóa một URL nếu bạn đang gửi nó như một phần của yêu cầu GET.

Làm cách nào để bạn mã hóa một URL trong JavaScript?

Tùy thuộc vào những gì bạn cần làm, có 2 hàm JavaScript sẽ giúp bạn.

Đầu tiên làencodeURI(), và thứ hai làencodeURIComponent().

Lưu ý: bạn có thể đọc vềescape(), nhưng điều đó không được dùng nữa và không nên được sử dụng.

2 phương pháp đó khác nhau về ký tự mà chúng mã hóa.

Về chi tiết,encodeURI()không mã hóa[email protected]#{{content}}amp;*()=:/,;?+encodeURIComponent()không mã hóa-_.!~*'(), mã hóa tất cả các ký tự khác. Tại sao chúng khác nhau? Bởi vì chúng được dùng cho các mục đích sử dụng khác nhau:

  • encodeURI()có nghĩa là mã hóa một URL đầy đủ
  • encodeURIComponent()được dùng để mã hóa một giá trị tham số URL

Nếu bạn đã gọiencodeURIComponent()trên một URL đầy đủ, vì nó mã hóa/, các dấu phân tách đường dẫn URL cũng sẽ được mã hóa (trong số những thứ khác):

encodeURI("http://flaviocopes.com/ hey!/")
//"http://flaviocopes.com/%20hey!/"
encodeURIComponent("http://www.example.org/a file with spaces.html")
// "http%3A%2F%2Fflaviocopes.com%2F%20hey!%2F"

MDNđề xuất một cải tiến để tuân thủRFC 3986 standard (http://tools.ietf.org/html/rfc3986), bằng cách thực hiện chức năng sau:

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

Bạn gọi nó cho mỗi tham số mà bạn sẽ thêm vào URL.

CácencodeURI()encodeURIComponent()phương pháp có mộtdecodeURI()decodeURIComponent()cái nào thực hiện công việc ngược lại mà bạn có thể sử dụng trên phần phụ trợ nếu bạn sử dụngNode.js.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: