🆘！怎么实现字符串转xml展示？？？

什么是 XML？

XML 指可扩展标记语言（EXtensible Markup Language）。
XML 是一种很像 HTML 的标记语言。
XML 的设计宗旨是传输数据，而不是显示数据。
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准。

XML 和 HTML 看起来是类似的，但其实他们是不同的，XML 和 HTML 为不同的目的而设计：

XML 被设计用来传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

需求是什么？

因接口返回的xml数据为字符串，且不包含\r\n等换行符，导致可读性非常差，如下图所示：所以现在的需求是要将其以格式化后的样式进行展示。

实现方案

由上图可知xml数据的标签都是成对出现的，可以根据此规律在适当的位置补充\r\n进行换行，方法如下：

ts 复制代码

  formatXML(xml: string, tab: string) {
    let formatted = '';
    let indent = '';
    xml.split(/>\s*</).forEach(function (node) {
      if (node.match(/^\/\w/)) {
          indent = indent.substring(tab?.length)
      };
      formatted += indent + '<' + node + '>\r\n';
      if (node.match(/^<?\w[^>]*[^\/]$/)) {
          indent += tab
      };
    });
    return formatted.substring(1, formatted.length - 3);
  }

格式化后的部分数据如下图所示：

由此可见，formatXML方法已实现字符串的格式化，但新问题又出现了，当数据量较大时，为了方便阅读，那么就需要支持代码的折叠，在查阅了一番资料后决定使用@uiw/react-codemirror。@uiw/react-codemirror是基于codeMirror进行封装的编辑器组件，功能已非常完善且支持扩展，官方文档也非常友好，开箱即用，上手成本较低，因组件内容比较丰富，这里就不进行详细说明了，感兴趣的小伙伴们可以去官网瞅一瞅。

使用该插件后最终的实现效果如下图所示，已基本符合需求：

小结

在最开始开发该需求时，并不是这样的思路，我先是将字符串转为了Dom元素，但是Dom元素并不能直接展示，所以再将Dom元素转成JSON，再通过xml2js将其转为xml展示，越开发感觉越不对劲，'曲线救国'麻烦的要命，特别是转JSON时还需要按照xml2js的转换规律进行转换，所以决定推翻重构，后面才以现在的实现方案进行开发，所以开发需求时不要急着动手，先确定好思路再行动可以少走点'弯路'。

js 复制代码

// 获取Dom元素
const xmlDoc = new DOMParser().parseFromString(xmlString, "text/xml");

function getDomJson(dom) {
    let domObj;
    if (dom.nodeType === 1) {
    // 如果是element节点
        domObj = {
            tag: dom.localName,
            attributes: {},
            children: []
        }
    // 属性列表
        let attlist = dom.attributes;
        for (let i = 0, l = attlist.length; i < l; i++) {
            // .name获取属性名，.value获取属性值
            domObj.attributes[attlist[i].name] = attlist[i].value
        }
        // 子元素列表
        let childList = dom.childNodes
        for (let i = 0, l = childList.length; i < l; i++) {
            // 递归
            const childJson = getDomJson(childList[i])
            if (childJson) {
                domObj.children.push(childJson)
            }
        }
    } else if (dom.nodeType === 3) {
        // 如果是text节点
        const ctn = dom.textContent.trim()
        if (ctn) {
            domObj = {
                tag: 'text',
                content: ctn
            }
        }
    }
    return domObj
}

各位大佬们如果有更好的思路麻烦在评论区进行教学，小的先谢为敬🫡。