当前位置:首页 > JavaScript

js 实现urlencode

2026-04-06 11:05:32JavaScript

URL编码的基本概念

URL编码(Percent-Encoding)是一种将特殊字符转换为安全传输格式的机制。通过将字符替换为%后跟两位十六进制值的形式,确保URL中不会出现歧义字符(如空格、&=等)。

原生JavaScript实现方法

使用内置函数encodeURIComponent()可完成大部分需求:

const encoded = encodeURIComponent('测试&value=1');
console.log(encoded); // 输出:"%E6%B5%8B%E8%AF%95%26value%3D1"

注意

  • 该方法会对!, ', (, ), *, -, _, ~, . 等字符保留原样
  • 若需编码整个URL(含协议和域名),应使用encodeURI()

手动实现方案

如需自定义编码逻辑,可通过字符遍历处理:

function customUrlEncode(str) {
  return str.split('').map(char => {
    const code = char.charCodeAt(0);
    return code > 0x20 && code < 0x7F && !/[<>#%{}|\^~[]`]/.test(char) 
      ? char 
      : '%' + code.toString(16).toUpperCase();
  }).join('');
}

关键逻辑

  1. 检查ASCII码范围(0x20-0x7F)
  2. 排除保留字符和危险字符
  3. 非安全字符转为%XX格式

特殊场景处理

处理表单数据时需注意:

const formData = { name: "张三", age: 25 };
const encodedParams = Object.entries(formData)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join('&');
// 结果:"name=%E5%BC%A0%E4%B8%89&age=25"

解码方法

使用decodeURIComponent()还原数据:

js 实现urlencode

const decoded = decodeURIComponent('%E6%B5%8B%E8%AF%95');
console.log(decoded); // 输出:"测试"

标签: jsurlencode
分享给朋友:

相关文章

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…

js实现下拉菜单

js实现下拉菜单

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

js 实现图片 放大

js 实现图片 放大

使用 CSS transform 实现图片放大 通过 CSS 的 transform: scale() 属性可以实现图片的平滑放大效果。结合 JavaScript 监听鼠标事件控制放大状态: con…