如何使用JavaScript动态修复无效HTML 对齐Chrome浏览器解析结果

解决方案 #

浏览器端实现 #

直接使用浏览器原生DOMParser即可，它完全遵循WHATWG HTML解析标准，修复逻辑和Chrome自身渲染时的HTML容错逻辑100%一致，不需要引入第三方依赖：

function repairInvalidHtml(rawHtml) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(rawHtml, 'text/html');
  // 若需要完整HTML文档结构，可返回 doc.documentElement.outerHTML
  return doc.body.innerHTML;
}

// 测试用例
const badHtml = `<span>This is a <em class="test">test</span> title</em>`;
console.log(repairInvalidHtml(badHtml));
// 输出：<span>This is a <em class="test">test</em></span><em class="test"> title</em>

Node.js服务端实现 #

服务端环境没有原生DOM API，可以使用jsdom库，它完整实现了浏览器HTML解析标准，修复结果和Chrome完全对齐：

const { JSDOM } = require('jsdom');

function repairInvalidHtml(rawHtml) {
  const dom = new JSDOM(rawHtml);
  return dom.window.document.body.innerHTML;
}

优势 #

• 完全遵循官方HTML容错规范，和Chrome修复结果完全一致，不会出现跨浏览器解析差异
• 支持任意层级的嵌套标签错误修复，覆盖所有HTML无效嵌套场景
• 性能足够支撑富文本编辑器的实时修复需求

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