当前位置:首页 > JavaScript

js 实现urlencode

2026-03-14 17:16:37JavaScript

URL编码的基本概念

URL编码(也称为百分号编码)是将URL中的特殊字符转换为%后跟两位十六进制数的形式。例如,空格被编码为%20。

使用encodeURIComponent

JavaScript提供了encodeURIComponent函数,用于对URI组件进行编码。该函数会将除了字母、数字和- _ . ! ~ * ' ( )之外的字符都进行编码。

const encoded = encodeURIComponent('https://example.com/?name=张三&age=20');
console.log(encoded);
// 输出:https%3A%2F%2Fexample.com%2F%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20

使用encodeURI

encodeURI函数用于编码整个URI,但不会编码保留字符如:/?#[]@!$&'()*+,;=

const encoded = encodeURI('https://example.com/?name=张三&age=20');
console.log(encoded);
// 输出:https://example.com/?name=%E5%BC%A0%E4%B8%89&age=20

手动实现URL编码

如果需要更细粒度的控制,可以手动实现URL编码函数。

function urlEncode(str) {
  return str.split('').map(char => {
    const code = char.charCodeAt(0);
    if (code >= 48 && code <= 57 ||  // 0-9
        code >= 65 && code <= 90 ||  // A-Z
        code >= 97 && code <= 122 || // a-z
        char === '-' || char === '_' || char === '.' || char === '~') {
      return char;
    }
    return '%' + code.toString(16).toUpperCase();
  }).join('');
}

console.log(urlEncode('https://example.com/?name=张三&age=20'));
// 输出:https%3A%2F%2Fexample%2Ecom%2F%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20

解码URL

使用decodeURIComponent可以解码URL编码的字符串。

js 实现urlencode

const decoded = decodeURIComponent('https%3A%2F%2Fexample.com%2F%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D20');
console.log(decoded);
// 输出:https://example.com/?name=张三&age=20

注意事项

  • encodeURIComponent适用于编码URI的组件(如查询参数),而encodeURI适用于编码整个URI。
  • 手动实现时需要注意保留字符的处理,确保与标准一致。
  • 解码时应使用对应的decodeURIComponentdecodeURI函数。

标签: jsurlencode
分享给朋友:

相关文章

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js 实现跳转

js 实现跳转

使用 window.location.href 进行跳转 通过修改 window.location.href 可以跳转到指定 URL,浏览器会加载新页面: window.location.hre…

js实现下拉刷新

js实现下拉刷新

监听触摸事件 通过监听 touchstart、touchmove 和 touchend 事件来检测用户下拉手势。记录触摸起始位置和移动距离。 let startY = 0; let curr…

js实现文件夹

js实现文件夹

使用JavaScript创建文件夹 在浏览器端的JavaScript中无法直接操作文件系统创建文件夹,这是出于安全考虑。但在Node.js环境中可以通过文件系统模块(fs)实现。 Node.js中使…

js实现截图

js实现截图

使用HTML2Canvas库实现截图 HTML2Canvas是一个流行的JavaScript库,可以将网页元素或整个页面转换为Canvas图像。安装方式: npm install html2canv…