-
[Javascript] 웹 브라우저에서 XML 파싱하기Coding/etc 2019. 9. 18. 17:52
Javascript로 XML 파싱하기
대부분의 웹 브라우저에서는 XML parser를 지원합니다. XML DOM은 XML에 접근하여 조작할 수 있는 기능을 포함하고 있습니다.
XML parser는 XML 데이터를 받아들여(String이든 평문이든) XML DOM 객체로 변환시켜 줍니다.
이를 통해 Javascript를 이용하면 웹 브라우저에서도 XML을 파싱할 수가 있습니다.Xml DOM 예제
간단하게 짧은 XML 데이터를 받아들여 원하고자 하는 태그의 text를 출력하는 예제입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>XML Parser</title> <script> function parseText() { var xmlText, xmlParser, xmlDoc; xmlText = "<country><name>korea</name>" + "<capital>seoul</capital></country>" xmlParser = new DOMParser(); xmlDoc = xmlParser.parseFromString(xmlText, "text/xml"); document.getElementById("text").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue + "의 수도는 " + xmlDoc.getElementsByTagName("capital")[0].childNodes[0].nodeValue + " 입니다."; } </script> </head> <body> <h1>문자열 파싱</h1> <button onclick="parseText()">파싱하기!</button> <p id="text"></p> </body> </html>xmlText라는 문자열에 XML 데이터가 들어가 있습니다.
이를 DOMParser를 이용하여 XML DOM 형태로 변환시켜 줍니다.
이제 parseFromString() 메소드를 통해 문자열을 xml 형식으로 바꾸어 준 뒤, 이를 xmlDoc에 저장합니다.
이제는 xmlDoc을 통해 노드, 노드의 text등에 접근할 수 있습니다.
간단하게 'name' 'capital' 두 가지 태그로 검색하여 간단한 문자열을 출력해 주는 코드입니다.
childNodes[] 배열은 해당 노드의 자식 노드들이 들어가 있으며, 현재 xml 데이터의 경우 자식 노드가 1개씩 밖에 없기 때문에
0으로 접근합니다. 이렇게 인덱스로도 자식 노드들에 접근할 수가 있으며, text값은 nodeValue로 얻을 수 있습니다.
실행 결과는 다음과 같습니다. 아래 버튼을 눌러보세요.
XML Parser 문자열 파싱
'Coding > etc' 카테고리의 다른 글
[C#] Unity Scene 전환하기/게임 종료하기 (0) 2019.11.19 [Java] StringBuilder와 StringBuffer의 차이점 (0) 2019.11.13 [XMLHttpRequest] XMLHttpRequest란 무엇일까 (0) 2019.09.18 [XSLT 예제] HTML 테이블 그리기 (0) 2019.09.17 [XSLT 예제] 다중 조건문 수행하기 (1) 2019.09.09
