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

格式化效果