js格式化xml并高亮显示关键字

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>'

格式化效果