jQuery 3.5.0破坏性变更的具体内容、影响及代码适配咨询

嘿，我来帮你拆解一下jQuery 3.5.0这次的核心变更、影响和适配方案～

首先得明确：这次变更的核心是修改了jQuery.htmlPrefilter方法的默认行为。

在3.5.0之前，这个方法会通过正则表达式强制把传入的自闭合标签（比如<div class='hot' />）转换成符合XHTML标准的完整闭合标签（<div class='hot'></div>），确保DOM结构的一致性。

而在3.5.0版本中，jQuery直接移除了这个正则处理逻辑，htmlPrefilter的默认实现变成了直接返回传入的原始HTML字符串。那为什么你测试<div class='hot' />还能得到预期的<div class="hot"></div>结果？这是因为浏览器的原生DOM解析引擎会自动处理这类自闭合的块级元素，把它补全成标准的闭合形式，所以从outerHTML看和之前没区别，但底层的处理逻辑已经完全变了。

这个变更的影响 #

• 对普通HTML元素几乎无影响：像div、p、span这类常见元素，浏览器会自动补全闭合标签，所以日常使用$(htmlString)创建元素时，你几乎感觉不到变化。
• 自定义元素或特殊元素可能出问题：如果你的代码里用到了自定义元素（比如<my-custom-component />），或者某些浏览器不会自动处理自闭合的元素，原来jQuery会帮你转换成<my-custom-component></my-custom-component>，现在不会了，可能导致DOM结构不符合预期，甚至影响组件渲染。
• 安全层面的提升：这次变更本质是修复一个XSS漏洞——原来的正则处理逻辑存在被绕过的可能，恶意攻击者可以构造特殊的HTML字符串绕过过滤，注入恶意代码。现在jQuery不再手动篡改HTML，转而依赖浏览器原生的安全解析机制，能有效降低XSS风险。

代码需要做哪些适配？ #

• 如果依赖自闭合标签转换逻辑：
  • 最简单的方式是手动修改代码中的自闭合标签，把所有非void元素（void元素比如img、input、br本身就是自闭合的，无需修改）的自闭合写法改成标准闭合写法，比如把<div />改成<div></div>。
  • 如果你需要保留原来的转换逻辑，可以重新自定义jQuery.htmlPrefilter方法，比如：

    jQuery.htmlPrefilter = function(html) {
      // 还原之前的自闭合标签转换逻辑
      return html.replace(/(<([a-z][a-z0-9]*)\b[^>]*?)\/>/gi, "$1></$2>");
    };
    

• 检查依赖htmlPrefilter的代码：如果你的代码里有直接调用jQuery.htmlPrefilter并依赖其返回值的逻辑，需要同步调整，因为现在它返回的是原始字符串。
• 普通场景无需修改：如果你只是用$(htmlString)创建常规HTML元素，那完全不用改代码，浏览器会帮你处理好标签闭合的问题，就像你测试的例子那样。

你的测试代码说明 #

你写的这段测试代码：

console.log($("<div class='hot' />")[0].outerHTML == '<div class="hot"></div>')

在3.5.0中返回true，正是因为浏览器自动补全了div标签的闭合，所以看起来和之前的结果一致，但这和jQuery的htmlPrefilter已经没关系了，是浏览器的功劳。

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