如何在JavaScript中將XML轉換為JSON字串？

---

XML（可擴充套件標記語言）和JSON（JavaScript物件表示法）是流行的資料交換格式。XML使用標籤來組織資料，而JSON是一種更緊湊的鍵值對格式。這在JavaScript應用程式中很常見。為了在JavaScript中方便或修改資料，有時需要將XML資料轉換為JSON。

本文探討了使用JavaScript將XML轉換為JSON的幾種方法，從開發自定義JavaScript框架和解決方案到使用DOM解析。

理解XML和JSON

XML示例

<person>
    <name>Pankaj</name>
    <age>20</age>
    <city>Surat</city>
</person>

JSON等價物

{
  "person": {
    "name": "Pankaj",
    "age": "20",
    "city": "Surat"
  }
}

XML資料具有分層結構，而JSON版本使用巢狀物件。在這些格式之間進行轉換涉及解析XML標籤和屬性以建立鍵值對。

將XML轉換為JSON字串的方法

• 使用DOMParser和遞迴
• 使用xml2json庫
• 使用自定義JavaScript邏輯

使用DOMParser和遞迴

DOMParser API將XML字串解析為DOM物件，從而更容易遍歷並將它們轉換為JSON。

示例程式碼

function xmlToJson(xml) {
  const obj = {};
  if (xml.nodeType === 1) { // Element node
    if (xml.attributes.length > 0) {
      obj["@attributes"] = {};
      for (let i = 0; i < xml.attributes.length; i++) {
        const attribute = xml.attributes[i];
        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
      }
    }
  } else if (xml.nodeType === 3) { // Text node
    obj = xml.nodeValue;
  }

  if (xml.hasChildNodes()) {
    for (let i = 0; i < xml.childNodes.length; i++) {
      const item = xml.childNodes.item(i);
      const nodeName = item.nodeName;
      if (typeof(obj[nodeName]) === "undefined") {
        obj[nodeName] = xmlToJson(item);
      } else {
        if (typeof(obj[nodeName].push) === "undefined") {
          obj[nodeName] = [obj[nodeName]];
        }
        obj[nodeName].push(xmlToJson(item));
      }
    }
  }
  return obj;
}

const xmlString = `<person><name>Pankaj</name><age>20</age><city>Surat</city>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
console.log(JSON.stringify(xmlToJson(xmlDoc.documentElement)));

輸出

{
  "person": {
    "name": "Pankaj",
    "age": "20",
    "city": "Surat"
  }
}

使用xml2json庫

使用像xml2json這樣的庫可以使轉換更容易。特別是對於複雜的XML結構，您可以透過CDN包含此庫或將其安裝在您的Node.js專案中。

示例程式碼

// Assuming xml2json library is available
const xmlString = `<person><name>Pankaj</name><age>20</age><city>Surat</city>`;
const json = xml2json(xmlString, {compact: true, spaces: 2});
console.log(json);

輸出

{
  "person": {
    "name": "Pankaj",
    "age": "20",
    "city": "Surat"
  }
}

使用自定義JavaScript邏輯

如果您只需要處理簡單的XML結構，自定義解析器可能會更好，在這裡我們將手動解析XML標籤和屬性。

示例程式碼

function customXmlToJson(xml) {
  const obj = {};
  const regex = /<([^/]+?)>([^<]+)<\/\1>/g;
  let match;
  while ((match = regex.exec(xml))) {
    obj[match[1]] = match[2];
  }
  return obj;
}

const xmlString = `<person><name>Pankaj</name><age>20</age><city>Surat</city></person>`;
console.log(JSON.stringify(customXmlToJson(xmlString)));

輸出

{
  "person": {
    "name": "Pankaj",
    "age": "20",
    "city": "Surat"
  }
}

處理邊緣情況

• XML中的屬性：如果XML具有屬性（例如，<name gender="male">Pankaj</name>），則應將它們分別儲存在JSON中，位於@attributes鍵下，以避免與標籤內容衝突。
• 空標籤：沒有內容的標籤（例如，<city />）應對映到JSON中的null。
• XML中的陣列：XML中重複的標籤（例如，多個<phone>條目）應轉換為JSON中的陣列以保留資料結構。