JavaScript で XML を JSON に変換する
この記事では、JavaScript の正規表現とデフォルトの文字列メソッド matchAll() を使用して、XML 文字列を JSON 形式のデータに変換する方法を学習します。
拡張マークアップ言語 (XML)
Extensible Markup Language (XML) は、HTML に近いマークアップ言語です。 HTML のような定義済みのタグはありませんが、要件に合わせてタグを定義できます。
XML を使用してデータを保存、検索、共有できます。
例：
<root>
<tag>tag content</tag>
<tag2>another content</tag2>
</root>
HTMLのように/でタグを開閉する必要があります。
JavaScript オブジェクト記法 (JSON)
JavaScript Object Notation (JSON) は、データを保存および転送するためのテキスト形式です。 自己記述的でわかりやすいです。
JSON では、データをキーと値のペアで保存します (各キーには値があります)。
例：
'{"name":"Bravo", "age":40, "car":null}'
JavaScript で matchAll() メソッドを使用して XML を JSON に変換する
XML データを JSON に正確に変換または変換するには、複数の方法があります。 regex (正規表現) とデフォルトの JavaScript 文字列メソッド matchAll() を使用して、XML を JSON に変換する方法を学習します。
JavaScript メソッド matchAll() は、指定された正規表現を使用して文字列を照合することにより、すべての結果の反復子を返します。
ユーザー提供の入力 (XML):
<root><tag>tag content</tag><tag2>another content</tag2></root>
変換後に予想される JSON 出力:
[object Object] {
root: [object Object] {
tag: "tag content",
tag2: "another content"
}
}
以下の例では、XML 文字列を使用し、matchALL() メソッドを正規表現で実装して、JSON データ形式に変換します。
必要な正規表現:
regex = /(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm;
例：
<script>
const xmlString = '<root><tag>tag content</tag><tag2>another content</tag2></root>'; //provided xml
function convertXmlToJson(xmlString) {
const jsonData = {};
for (const result of xmlString.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
const key = result[1] || result[3];
const value = result[2] && convertXmlToJson(result[2]); //recusrion
jsonData[key] = ((value && Object.keys(value).length) ? value : result[2]) || null;
}
return jsonData;
}
console.log("Data after converting to JSON:")
console.log(convertXmlToJson(xmlString)); //print the result in logs
</script>
出力：
"Data after converting to JSON:"
[object Object] {
root: [object Object] {
tag: "tag content",
tag2: "another content"
}
}
説明：
-
例では、XML 文字列を変数に初期化して JSON データを生成しました。
-
XML 文字列を引数として取得する関数
convertXmlToJson()を宣言しました。 -
その関数では、
matchAll(regex)で XML 文字列の実行を反復するためにforループを使用しました。 -
ループの本体内で、キーと値を作成し、その結果を既に宣言されている変数
const jsonData = {}に格納しています。 -
ボディ自体の中に
convertXmlToJson()という関数が表示されます。 これは、再帰 (再帰関数) として知られています。再帰関数は中かっこで呼び出され、実行を繰り返します。
-
次に、単純に
convertXmlToJson()をjsonData変数とともに返します。 -
console.log()メソッドを使用して関数を呼び出し、返された結果を表示します。