JavaScript encodeURI()、decodeURI() 及其组件函数

发布时间：2025-08-19 11:22

JavaScript中的函数概念与使用方法 #生活知识# #编程教程#

javascriptweb developmentobject oriented programming更新于 2024/7/13 15:40:00

encodeURI() 函数对完整的 URI 进行编码，包括除 (、/? : @ & = + $ #) 字符以外的特殊字符。

encodeURIComponent() 函数通过基本编码特殊字符来对 URI 的某些部分进行编码。它还对以下字符 − (、/? : @ & = + $ # ) 进行编码

decodeURI() 函数对 encodeURI() 函数生成的 URI 进行解码。

decodeURIComponent() 函数用于对 encodeURIComponent() 生成的 URI 的某些部分进行解码。

以下是 encodeURI()、decodeURI() 及其组件函数的代码 −

示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .encode, .decode { font-size: 18px; font-weight: 500; } </style> </head> <body> <h1>encodeURI(), decodeURI() and its components functions</h1> <button class="encodeUri">ENCODE URI</button> <button class="decodeUri">DECODE URI</button> <button class="encodeUriComponent">ENCODE URI COMPONENT</button> <button class="decodeUriComponent">DECODE URI COMPONENT</button> <div class="encode"></div> <div class="decode"></div> <h3> Click on the above buttons to encode or decode URI component </h3> <script> let fillEle = document.querySelector(".sample"); let decodeEle = document.querySelector(".decode"); let encodeEle = document.querySelector(".encode"); let url = "https://www.google.com/sample%20link/?img=91gf.jpg&size=451px"; let encodeUrl; document.querySelector(".encodeUri").addEventListener("click", () => { encodeUrl = encodeURI(url); encodeEle.innerHTML = "Encoded url = " + encodeUrl; }); document.querySelector(".decodeUri").addEventListener("click", () => { decodeEle.innerHTML = "Decoded url = " + decodeURI(encodeUrl); }); let encodeComponent; document .querySelector(".encodeUriComponent") .addEventListener("click", () => { encodeComponent = encodeURIComponent(url); encodeEle.innerHTML = "Encoded url = " + encodeComponent; }); document .querySelector(".decodeUriComponent") .addEventListener("click", () => { decodeEle.innerHTML = "Decoded url = " + decodeURIComponent(encodeComponent); }); </script> </body> </html>

输出

点击“ENCODE URI”然后点击“DECODE URI”按钮 −

在 JavaScript 中验证数字是否为斐波那契数列在 JavaScript 中检查有间隙数字如何使用 JavaScript 重定向到另一个网页? 如何使用 HTML 和 JavaScript 创建速度转换器? 如何使用 HTML 和 JavaScript 创建长度转换器? 如何使用 HTML 和 JavaScript 创建温度转换器? 如何使用 HTML 和 JavaScript 创建权重转换器? 如何使用 JavaScript 创建和使用语法高亮器? 如何使用 JavaScript 来使用媒体查询? 如何使用 JavaScript 和 CSS 创建可拖动的 HTML 元素?

网址：JavaScript encodeURI()、decodeURI() 及其组件函数 https://klqsh.com/news/view/168352

⬅️上一篇：JavaScript decod

➡️下一篇：网易云音乐2025年上半年收入3

JavaScript encodeURI()、decodeURI() 及其组件函数

示例

输出

相关文章

相关内容

随便看看

最新乐趣

热点乐趣

专题

推荐乐趣