js 特殊字符转码

在JavaScript中，特殊字符转码通常涉及到URL编码、HTML实体编码等操作。

一、基础概念

URL编码
- 对于要在URL中传输的特殊字符（如空格、&、?等），需要进行URL编码。在JavaScript中，可以使用encodeURIComponent()函数对一个字符串进行URL编码，它会将特殊字符转换为特定格式的十六进制序列。例如，空格会被转换为%20，&会被转换为%26。
- 相反的操作可以使用decodeURIComponent()函数将编码后的字符串还原。

HTML实体编码
- 在HTML中，某些字符具有特殊含义（如<表示标签的开始，>表示标签的结束）。为了避免浏览器错误解析，需要将这些特殊字符转换为HTML实体。例如，<会被转换为<，>会被转换为>。在JavaScript中，可以使用一些库（如he库）来进行HTML实体编码和解码，也可以手动构建转换逻辑。

二、优势

数据传输准确性
- 在URL编码的情况下，确保特殊字符在网络传输过程中不会被误解。例如，在发送包含查询参数的HTTP请求时，如果不进行URL编码，服务器可能无法正确解析参数。

避免HTML解析错误
- 对于HTML实体编码，能防止浏览器将特殊字符错误地当作HTML标签进行解析，从而保证页面内容的正确显示。

三、类型

按编码目的分
- URL编码：主要用于在URL中安全地传输数据。
- HTML实体编码：主要用于在HTML内容中正确显示特殊字符。
- 还有JavaScript字符串中的转义编码，例如\n表示换行，\t表示制表符等，这是为了在JavaScript代码中表示特殊字符或者控制字符序列。

四、应用场景

URL构建
- 当构建包含查询参数的URL时，如https://example.com/search?q = hello world&lang = en，这里的hello world中的空格和&就需要进行URL编码，变成https://example.com/search?q = hello%20world&lang = en。

HTML内容生成
- 如果要在网页上显示用户输入的内容，例如用户输入了<script>alert('xss')</script>，为了防止跨站脚本攻击（XSS），需要将<和>转换为HTML实体，变成<script>alert('xss')</script>。

五、可能遇到的问题及解决方法

双重编码问题
- 问题：如果在已经编码过的字符串上再次进行编码，会导致字符串中出现多余的编码字符。例如，先对一个包含&的字符串进行了URL编码得到https://example.com/search?q = hello%26world，然后又对这个编码后的字符串整体进行URL编码，%26会被再次编码成%2526。
- 解决方法：确保编码操作的合理性，在需要解码和重新编码的场景下，先正确解码再编码。

编码与解码不匹配
- 问题：如果对一个URL编码后的字符串使用HTML实体解码函数（或者反之），会导致结果乱码。例如，对https://example.com/search?q = hello%20world使用HTML实体解码函数，空格不会被正确还原。
- 解决方法：明确字符串的编码类型，使用对应的编码和解码函数。

以下是一个简单的JavaScript示例，展示URL编码和解码：

// URL编码
let str = "hello world&test";
let encodedStr = encodeURIComponent(str);
console.log(encodedStr);

// URL解码
let decodedStr = decodeURIComponent(encodedStr);
console.log(decodedStr);

对于HTML实体编码，如果手动实现简单的转换（仅示例部分字符）：

function htmlEncode(str) {
    let replacements = {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;'
    };
    return str.replace(/[<>&]/g, function (match) {
        return replacements[match];
    });
}

let htmlStr = "<div>&test</div>";
let encodedHtmlStr = htmlEncode(htmlStr);
console.log(encodedHtmlStr);