如何闭合document.createElement创建的HTML标签？满足XHTML自闭合需求

当然可以搞定！Quill默认输出的是HTML5格式，其中像<br>、<img>这类空元素没有自闭合，但要转成XHTML规范的话，不管是客户端还是服务端（Node.js/PHP）都有现成的解决办法，下面给你逐个拆解：

如果想在浏览器端直接处理Quill的输出，有两种可靠的方式：

方法1：用XMLSerializer（最严谨） #

浏览器自带的XMLSerializer可以直接把DOM节点序列化为符合XHTML规范的字符串，自动处理自闭合标签：

// 获取Quill编辑器的HTML内容
const quillHtml = quill.root.innerHTML;

// 转换为XHTML
function convertToXHTML(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const serializer = new XMLSerializer();
  // 只返回body内的内容，去掉自动生成的html/head标签
  return serializer.serializeToString(doc.body).replace(/^<body>|<\/body>$/g, '');
}

const xhtmlContent = convertToXHTML(quillHtml);

这个方法完全基于浏览器原生API，不需要额外依赖，而且能处理所有HTML空元素（比如<hr>、<input>如果有的话），不会出现正则匹配的遗漏问题。

方法2：正则替换（轻量快速） #

如果Quill的输出格式比较固定（比如只有<br>、<img>需要处理），用正则替换会更轻量：

function convertToXHTML(html) {
  // 匹配br、img、hr这些空标签，替换为自闭合形式
  return html.replace(/<(br|img|hr)([^>]*)>/gi, '<$1$2/>');
}

// 使用示例
const xhtmlContent = convertToXHTML(quill.root.innerHTML);

注意：这个方法适合Quill生成的标准内容，如果你的场景有复杂的自定义标签，还是推荐用XMLSerializer。

在Node.js环境中，我们可以用第三方DOM解析库来处理，推荐两个常用方案：

方案1：jsdom（模拟浏览器环境） #

jsdom可以模拟浏览器的DOM环境，用法和客户端类似：

1. 先安装依赖：

npm install jsdom

2. 转换代码：

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

function convertToXHTML(html) {
  const dom = new JSDOM(html);
  const serializer = new dom.window.XMLSerializer();
  return serializer.serializeToString(dom.window.document.body).replace(/^<body>|<\/body>$/g, '');
}

// 使用示例
const quillHtml = '<p>Hello<br></p><img src="demo.jpg">';
const xhtml = convertToXHTML(quillHtml);
console.log(xhtml);

方案2：cheerio（轻量HTML解析） #

cheerio是jQuery风格的HTML解析库，开启xml模式后会自动输出XHTML：

1. 安装依赖：

npm install cheerio

2. 转换代码：

const cheerio = require('cheerio');

function convertToXHTML(html) {
  // 开启xmlMode，自动生成XHTML格式
  const $ = cheerio.load(html, { xmlMode: true });
  return $.xml();
}

// 使用示例
const xhtml = convertToXHTML(quill.root.innerHTML);

这个方案代码更简洁，性能也更好，适合批量处理内容。

PHP自带的DOMDocument就可以完成转换，不需要额外安装扩展：

function convertToXHTML(string $html): string {
  $dom = new DOMDocument();
  // 关闭libxml的错误提示，避免解析HTML时的警告
  libxml_use_internal_errors(true);
  // 加载HTML内容
  $dom->loadHTML($html);
  libxml_clear_errors();
  // 开启格式化输出
  $dom->formatOutput = true;
  // 输出XML格式的内容（即XHTML），只保留body内的部分
  $xhtml = $dom->saveXML($dom->documentElement);
  // 去掉自动添加的html/body标签
  return preg_replace('/^<html><body>|<\/body><\/html>$/s', '', $xhtml);
}

// 使用示例
$quillHtml = '<p>Hello<br></p><img src="demo.jpg">';
$xhtmlContent = convertToXHTML($quillHtml);
echo $xhtmlContent;

这个方法利用PHP原生DOM处理能力，稳定性很高，适合PHP后端项目使用。

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