JavaScript >> Javascript 文檔 >  >> Tags >> URL

如何使用 JavaScript 對 URL 進行編碼

網址編碼 ,也稱為百分比編碼 , 是對 URL 中的特殊字符進行編碼的過程,以使傳輸的數據更加安全可靠。它有助於在調用遠程 Web 服務時避免跨站點攻擊。

URL 中可以有兩種類型的字符:保留 並且無保留 .保留字符是在 URL 中具有特殊含義的字符。例如,? , / , # , : 等是保留字符,它們不能是查詢字符串或路徑段的一部分。未保留的字符沒有特殊含義。使用 URL 編碼,這些字符被轉換為特殊的字符序列。

在本文中,您將學習如何對 URL 進行編碼 使用 JavaScript 內置函數。 JavaScript 提供了兩個 幫助您對 URL 進行編碼的函數:encodeURI()encodeURIComponent() .這兩種方法都旨在用於不同的用例。讓我們從第一個開始。

encodeURI()

encodeURI() 方法旨在對完整的 URL 進行編碼。它假定輸入是一個完整的 URL,其中包含一些需要編碼的特殊字符。因此,它 編碼保留字符(~!$&@#*()=:/,;?+ )。

讓我們看一個例子:

const url = 'http://example.com/!learn javascript$/';

// encode complete URL
const encodedUrl = encodeURI(url);

// print encoded URL
console.log(encodedUrl);

// output: http://example.com/!learn%20javascript$/

encodeURIComponent()

encodeURIComponent 函數應該用於編碼單個 URL 組件(如查詢字符串參數)而不是完整的 URL。它使用 UTF-8 編碼方案並編碼除 -_.!~*'() 之外的所有具有特殊含義的字符 .

如果您使用 encodeURIComponent() 對完整的 URL 進行編碼,包括路徑分隔符 (/ ) 將被編碼如下所示:

const url = 'http://example.com/!learn javascript$/';

// encode complete URL
const encodedUrl = encodeURIComponent(url);

// print encoded URL
console.log(encodedUrl);

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F

理想情況下,您應該使用 encodeURIComponent() 方法只有 用於編碼查詢字符串參數或路徑段。這是一個例子:

const baseUrl = 'http://www.google.com/search?q=';
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query);

// build full URL
const url = baseUrl + encodedQuery;

// print full URL
console.log(url);

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript

你應該調用 encodeURIComponent() 每個查詢字符串參數的方法,其中可能包含特殊字符以避免網絡錯誤和意外響應。

注意: MDN 建議改進以遵守 RFC 3986 標準(保留 ! , ' , ( , ) , 和 * 字符)通過實現以下方法:

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

console.log(fixedEncodeURIComponent('node * ! javascript'));

// output: node%20%2a%20%21%20javascript

閱讀下一篇: 如何使用 JavaScript 解碼 URL


Tutorial JavaScript 教程
  1. 用於區塊鏈開發的 Node.js

  2. 如何解決 Lerna 中的包版本控制問題

  3. 簡而言之,管理雙向鍊錶中的指針

  4. 通過構建 UI 框架來學習 JavaScript:第 4 部分 - 創建模塊捆綁器

  5. Eclipse JavaScript 編輯器:js 文件的內容輔助,自動完成

  6. 動態文本重寫

  7. 如何復制數組

  1. 為什麼使用 ReactJS:構建下一個網站的完整指南

  2. 檢測觸摸:這是“為什麼”,而不是“如何”

  3. 🦩 5 個幫助我獲得第一份前端開發工作的免費編碼資源

  4. 如何在javascript中生成數字/字符序列?

  5. 新手編碼員的 Visual Studio 代碼設置

  6. 引擎蓋下的 Node.js #3 - 深入事件循環

  7. 保存 React Hook 備忘單

  1. 超鏈接下載屬性不起作用

  2. 玩 node-canvas 並構建一些有用的東西

  3. 小遊戲和有趣的互動

  4. 使用 Next.js 進行服務器端渲染時處理運行時錯誤