JavaScript에서 XML을 JSON으로 변환

1. 확장 가능한 마크업 언어(XML)
2. JavaScript 객체 표기법(JSON)
3. matchAll() 메서드를 사용하여 JavaScript에서 XML을 JSON으로 변환

이 기사에서는 정규식과 JavaScript의 기본 문자열 메서드인 matchAll()을 사용하여 XML 문자열을 JSON 형식 데이터로 변환하는 방법을 배웁니다.

확장 가능한 마크업 언어(XML)

XML(Extensible Markup Language)은 HTML에 가까운 마크업 언어입니다. HTML과 같은 미리 정의된 태그는 없지만 요구 사항에 맞게 태그를 정의할 수 있습니다.

XML을 사용하여 데이터를 저장, 검색 및 공유할 수 있습니다.

예:

<root>
<tag>tag content</tag>
<tag2>another content</tag2>
</root>

HTML처럼 /로 태그를 열고 닫아야 합니다.

JavaScript 객체 표기법(JSON)

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 텍스트 형식입니다. 그것은 자기 설명적이고 이해하기 쉽습니다.

JSON에서는 데이터를 키-값 쌍으로 저장합니다(각 키에는 값이 있음).

예:

'{"name":"Bravo", "age":40, "car":null}'

matchAll() 메서드를 사용하여 JavaScript에서 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() 함수를 선언했습니다.

• 해당 함수에서 for 루프를 사용하여 matchAll(regex)로 XML 문자열에서 실행을 반복했습니다.

• 루프 본문 내에서 키와 값을 만들고 결과를 이미 선언된 변수 const jsonData = {}에 저장합니다.

• 본문 내부에 convertXmlToJson()이라는 함수가 있는 것을 볼 수 있습니다. 재귀(재귀 함수)라고 합니다.

  재귀 함수는 실행을 반복하기 위해 중괄호 안에 호출됩니다.

• 그런 다음 jsonData 변수와 함께 convertXmlToJson()을 반환합니다.

• console.log() 메서드를 사용하여 함수를 호출하고 반환된 결과를 표시합니다.