Codewars htmlspecialchars挑战：替换顺序错误为何导致代码失效？

你的两段代码仅替换顺序不同，但结果天差地别，核心问题出在特殊字符&的处理时机：

第一段代码为啥不行？ #

你先替换了<、>、"，这些字符被转换成的HTML实体（比如<变成<）里本身包含&。等最后再替换&的时候，会把之前刚生成的实体里的&也一并换成&，等于把已经转义好的内容又转义了一次，结果完全错误。

举个具体例子：输入<，第一段代码的执行步骤是：

1. < → <（这一步本来是对的）
2. 最后替换所有& → <（这就错了，正确结果应该是<）

第二段代码为啥能成？ #

第二段代码先把所有原始的&替换成&，这一步处理完后，字符串里剩下的&都是合法转义实体的一部分，不会再被后续操作干扰。之后再替换<、>、"时，这些都是原始的特殊字符，替换后的实体（比如<）里的&不会被二次替换，最终得到的就是正确的HTML实体。

同样用<举例：输入<，第二段代码的执行步骤是：

1. 没有原始&，第一步无变化
2. < → <（结果正确）

代码对比 #

// 错误代码：先替换其他字符，后替换&导致二次转义
function htmlspecialchars(formData) {
    return formData.replaceAll('<', "&lt;")
                 .replaceAll('>', "&gt;")
                 .replaceAll('"', "&quot;")
                 .replaceAll('&', "&amp;");
}

// 正确代码：先替换&，避免干扰后续替换
function htmlspecialchars(formData) {
    return formData.replaceAll('&', "&amp;")
                 .replaceAll('"', "&quot;")
                 .replaceAll('<', "&lt;")
                 .replaceAll('>', "&gt;");
}

内容的提问来源于stack exchange，提问作者Adam