当前位置:首页 > JavaScript

js实现编码

2026-03-14 10:14:33JavaScript

JavaScript 实现编码的方法

JavaScript 提供了多种编码方式,可以根据不同的需求选择合适的编码方法。以下是常见的几种编码实现方式:

URL 编码

使用 encodeURIComponentencodeURI 对 URL 进行编码,避免特殊字符导致的 URL 解析问题。

const url = 'https://example.com/?name=张三&age=20';
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // 输出编码后的 URL

encodeURI 用于编码整个 URL,而 encodeURIComponent 用于编码 URL 的某一部分(如查询参数)。

Base64 编码

使用 btoaatob 进行 Base64 编码和解码。

const text = 'Hello, World!';
const encodedText = btoa(text); // Base64 编码
console.log(encodedText);

const decodedText = atob(encodedText); // Base64 解码
console.log(decodedText);

HTML 实体编码

使用 textContentinnerText 自动处理 HTML 实体编码,避免 XSS 攻击。

const element = document.createElement('div');
element.textContent = '<script>alert("XSS")</script>';
console.log(element.innerHTML); // 输出编码后的 HTML 实体

自定义编码函数

可以手动实现特定需求的编码逻辑,例如替换特定字符。

function customEncode(str) {
    return str.replace(/[&<>"']/g, function(match) {
        return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        }[match];
    });
}

const encoded = customEncode('<div>Hello</div>');
console.log(encoded); // 输出 &lt;div&gt;Hello&lt;/div&gt;

使用 TextEncoder 进行 UTF-8 编码

现代浏览器支持 TextEncoderTextDecoder 进行 UTF-8 编码和解码。

js实现编码

const encoder = new TextEncoder();
const encoded = encoder.encode('你好'); // 返回 Uint8Array
console.log(encoded);

const decoder = new TextDecoder();
const decoded = decoder.decode(encoded);
console.log(decoded); // 输出 "你好"

注意事项

  • URL 编码时注意区分 encodeURIencodeURIComponent 的使用场景。
  • Base64 编码仅支持 ASCII 字符,对 Unicode 字符需先转换为 UTF-8。
  • HTML 实体编码主要用于防止 XSS 攻击。
  • TextEncoderTextDecoder 是较新的 API,需确保目标环境支持。

标签: js
分享给朋友:

相关文章

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…

实现继承js

实现继承js

实现继承的方式 在JavaScript中,实现继承可以通过多种方式完成,每种方式都有其优缺点。以下是几种常见的实现继承的方法: 原型链继承 原型链继承是最基本的继承方式,通过将子类的原型指向父类的实…

js 实现全选

js 实现全选

实现全选功能的方法 使用 JavaScript 实现全选功能通常需要操作复选框(checkbox)的状态。以下是几种常见的实现方式。 通过 DOM 操作实现全选 // 获取全选复选框和子复选框 co…