如何阻止jQuery将XML标签转为小写？适配Draw.io需求

这个问题我之前也碰到过！核心原因是jQuery是为HTML设计的，而HTML标签是不区分大小写的，所以当你用它解析XML字符串时，会自动把所有标签名转成小写——但XML是大小写敏感的，这就和Draw.io的要求冲突了。

为什么你的代码会出问题 #

看你这段代码：

var apple = '<mxCell />'; 
var $div = $('<div>'); 
$div.append(apple); 
$("#graphXMlDiv").text($div.html());

当你调用$div.append(apple)时，jQuery把<mxCell />当成HTML片段解析，HTML引擎会自动将标签名转为小写，所以$div.html()返回的就是<mxcell />，最终显示的自然是小写标签。

解决方案：用XML专用的解析/序列化工具 #

我们需要避开jQuery的HTML解析逻辑，改用原生的XML处理API来保证标签大小写不变：

方法1：直接使用原生DOMParser和XMLSerializer

var apple = '<mxCell />';
// 用XML解析器处理字符串
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(apple, "text/xml");
// 将XML文档序列化为字符串
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(xmlDoc);
// 直接设置文本内容
$("#graphXMlDiv").text(xmlString);

这个方法的好处是完全遵循XML规范，不管多复杂的XML结构，标签大小写都会被严格保留。

方法2：直接插入文本（适用于简单XML字符串）

如果你的XML字符串已经是完整且正确的，其实可以跳过jQuery的DOM解析步骤，直接把字符串作为文本插入到容器中：

var apple = '<mxCell />';
$("#graphXMlDiv").text(apple);

这种方式最简单，因为text()方法会把传入的内容当成纯文本处理，不会做任何解析或大小写转换。

额外提示：构建复杂XML时用XML DOM #

如果需要动态构建XML结构（而不是拼接字符串），推荐使用原生XML DOM方法创建节点，比如：

var xmlDoc = document.implementation.createDocument("", "", null);
var mxCell = xmlDoc.createElement("mxCell");
mxCell.setAttribute("id", "cell1");
xmlDoc.documentElement.appendChild(mxCell);

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(xmlDoc);
$("#graphXMlDiv").text(xmlString);

这样能彻底避免字符串拼接带来的大小写问题，也更符合XML的操作规范。

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