js特殊符号转码

在JavaScript中，特殊符号转码通常涉及到URL编码（也称为百分号编码）和HTML实体编码。这两种编码方式用于在不同的上下文中安全地表示特殊字符。

URL编码

URL编码用于确保URL中的特殊字符被正确传输和解析。在URL中，某些字符如空格、引号、尖括号等具有特殊含义，因此需要被替换为百分号（%）后跟两个十六进制数字的形式。

例如，空格被编码为%20，问号?被编码为%3F。

应用场景：在发送HTTP请求时，特别是GET请求的查询参数中，或者在构建URL时。

示例代码：

// 编码
const encoded = encodeURIComponent('Hello World! How are you?');
console.log(encoded); // 输出: Hello%20World!%20How%20are%20you%3F

// 解码
const decoded = decodeURIComponent(encoded);
console.log(decoded); // 输出: Hello World! How are you?

HTML实体编码

HTML实体编码用于在HTML文档中安全地表示特殊字符，以防止浏览器将其误解为HTML标记。

例如，小于号<被编码为<，大于号>被编码为>，引号"被编码为"。

应用场景：在生成HTML内容时，特别是当内容来自用户输入或不可信的源时。

示例代码：

// 编码
const encoded = document.createElement('div');
encoded.textContent = 'This is a <test> & "dangerous" string!';
console.log(encoded.innerHTML); // 输出: This is a &lt;test&gt; &amp; &quot;dangerous&quot; string!

// 解码（在JavaScript中通常不需要手动解码HTML实体）

问题与解决方案

问题：当在URL或HTML中直接使用特殊字符时，可能会导致解析错误或安全问题（如XSS攻击）。

解决方案：使用JavaScript内置的encodeURIComponent和decodeURIComponent函数进行URL编码和解码，使用DOM方法如textContent自动处理HTML实体编码（在插入到DOM之前），或者使用第三方库如he（HTML Entities）进行更复杂的HTML实体编码和解码。

示例代码（使用he库进行HTML实体编码和解码）：

// 需要先引入he库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.min.js"></script>

// 编码
const encoded = he.encode('This is a <test> & "dangerous" string!', { useNamedReferences: true });
console.log(encoded); // 输出: This is a &lt;test&gt; &amp; &quot;dangerous&quot; string!

// 解码
const decoded = he.decode(encoded);
console.log(decoded); // 输出: This is a <test> & "dangerous" string!

通过这些编码和解码方法，可以确保在不同的应用场景中安全地处理特殊字符。