w3school XML DOM - DOMParser 对象DOMParser 解析 XML 标记来创建一个文档。构造函数new DOMParser()DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。要使用 DOMParser，使用不带参数的构造函数来实例化它，然后调用其 parseFromString() 方法：var doc = (new DOMParser()).parseFromString(text)IE 不支持 DOMParser 对象。相反，它支持使用 Document.loadXML() 的 XML 解析。DOMParser.parseFromString()解析 XML 标记语法parseFromString(text, contentType)text 参数是要解析的 XML 标记。contentType 是文本的内容类型。可能是 “text/xml” 、“application/xml” 或 “application/xhtml+xml” 中的一个。注意，不支持 “text/html”。实战js // 格式化xml 高亮显示 formatXml = function (content) { let xml_doc = null; const formatContent = content.replace(/[\n\r]/g, “”); try { xml_doc = (new DOMParser()).parseFromString(formatContent, ’text/xml’); } catch (e) { return false; } function build_xml(list, element, level) { let t = []; /level 节点层级。方便前面添加多少个空格缩进/ for (let i = 0; i < level; i++) { t.push(’ ‘); } t = t.join(""); list.push(t + ‘<<span class=“code-key”>’ + element.nodeName + ‘</span>>\n’); for (let i = 0; i < element.childNodes.length; i++) { const childLevel = level + 1; let childItem = element.childNodes[i]; let nodeName = childItem.nodeName; if (nodeName === ‘#text’) { continue; } if (childItem.childNodes.length <= 1) { let value = ‘’; if (childItem.childNodes.length === 1) { value = childItem.childNodes[0].nodeValue; } // 将html标签转化成实体 value = value ? value.replace(/&/g, ‘&amp;’).replace(/</g, ‘&lt;’).replace(/>/g, ‘&gt;’) : ‘’; let value_color = !isNaN(Number(value)) ? ‘code-number’ : ‘code-string’; let value_txt = ‘<span class="’ + value_color + ‘">’ + value + ‘</span>’; let item = t + ’ <<span class=“code-key”>’ + nodeName + ‘</span>>’ + value_txt + ‘&lt;/<span class=“code-key”>’ + nodeName + ‘</span>>\n’; list.push(item); } else { build_xml(list, element.childNodes[i], childLevel); } } list.push(t + ‘&lt;/<span class=“code-key”>’ + element.nodeName + ‘</span>>\n’); } let list = []; build_xml(list, xml_doc.documentElement, 0); return list.join(""); };CSS样式 .code-string{color:green;} .code-number{color:darkorange;} .code-boolean{color:#000033;} .code-null{color:magenta;} .code-key{color:#003377;font-weight:bold;}eg.xml 格式’<?xml version=“1.0” encoding=“UTF-8”?>↵<XhwNewsML><Version>0.0.1</Version><ApiType>article</ApiType><PushTime>2018-12-25 15:05:00</PushTime><ACTION>1</ACTION><Relevant/><NodeList>↵ <NodeInfo ID=“11109319”>↵ ↵ <GAttr>63</GAttr>↵ <GDisplayOrder>-66480150.1020580000000000000</GDisplayOrder>↵ <NodeId>11109319</NodeId></NodeInfo>↵ <NodeInfo ID=“11187043”>↵ ↵ <GAttr>63</GAttr>↵ <GDisplayOrder>-66480150.1020580000000000000</GDisplayOrder>↵ <NodeId>11187043</NodeId></NodeInfo>↵ </NodeList></XhwNewsML>‘格式化效果