[JS] html 파일을 읽어 JSON 으로 변환하자

_html 파일을 읽어 json format 으로 변환하는 작업을 하게 되었다.

한번도 해본적 없는 일이라 여러 reference 를 뒤지던 중, 제일 쉽게 변환하는 방법이 있어 기록한다.

전제조건)
나의 경우는 파일업로드를 하여 html 파일을 읽는 것인데,html파일만 받아들이면 되었다.
아래는 예제코드다.

// html 부분
<input type="file" 
              accept=".html"
               onChange={(e) => {

                handleFiles(e)
            }}
  />

const handleFiles = (e) => {
	let fileReader = new FileReader();
    let file = e.target.files[0];
 
    fileReader.readAsText(file);
    let result = ''
    fileReader.onload = () => {
    	
        result = fileReader.result;
      const parser = new DOMParser();
      const doc = parser.parseFromString(result,'text/html');
    
    }
}

자 여기까지 보시면, doc이라는 상수에 html 파일을 파싱한 결과를 저장한다.
이제부터는 실제 활용법을 가질 것이다.

 const test = doc.getElementById(`gen16_15_txbP1`);

위와 같이 html 파일을 읽어 그중 id 값을 기준으로 찾아 test라는 변수에 매핑하는데, 나의 경우에는 위에 언급된 id 태그와 연결된 text값을 찾아야 했다.
그러므로 조금 변화를 주면,

const test = doc.getElementById(`gen16_15_txbP1`).textContent;

바로 다음 textContent라는 속성을 붙여 해당하는 텍스트를 출력한다.

한가지 팁을 드리자면 html 파일을 읽을 때, 테이블같은 표의 형식의 경우
일일이 id값을 전부 쓰기 불 필요하고 재사용가능한 코드를 작성하기 힘들기 때문에 object.keys 함수를 사용하여 루프를 돌리면 쉽게 해결할 수 있다.

이상 끝~!