작성배경

기존 마크업을 리팩토링한다거나, CMS에서 생성한 마크업을 검토하려고 할 때 줄바꿈과 들여쓰기가 엉망일 때가 많아서 작업이 힘들었습니다. 한동안 HTMLTidy 플러그인을 썼었는데, 이 플러그인은 빈 요소를 지우고 닫는 태그를 삽입하는 등 마크업을 강제로 바꿔버립니다. XHTML 문서로만 작업할 때는 상관이 없었는데, HTML 5로 넘어오면서 Tidy 플러그인이 HTML 5의 문법을 인식하지 못하기 때문에 골치아픈 일이 많았습니다.

Tidy 플러그인도 언젠가는 5 문법을 인식하도록 업그레이드 되겠지만, 제 생각에는 마크업을 강제로 수정하는 것은 썩 좋아보이지 않았습니다. 이를 보완하기 위해 원래 마크업이 틀렸든 맞든 신경쓰지 않고 틀리면 틀린대로, 맞으면 맞는대로 읽기 쉽게 줄바꿈과 들여쓰기만 넣는 프로그램을 만들었습니다.

사용법

맨 위에 있는 textarea에 정렬을 원하는 마크업을 붙여넣고 "포맷" 버튼을 누르시면 정렬된 내용이 textarea에 나타납니다. 자동으로 textarea 내용을 전체선택 하므로 다른 프로그램에서 사용하려면 Ctrl-C 만 누르시면 됩니다.

이 프로그램은 온전히 자바스크립트로만 만들었고 어떤 내용도 서버로 전송하거나 수집하지 않습니다.

로직요약

1. 문자열 처음부터 <를 만날때까지 output에 담습니다.
2. <로 시작해서 >로 끝나는 문자열이 통상 줄바꿈하는 태그(li, ul 등)인지 검사합니다.
3. 통상 줄바꿈하는 태그라면 output에 태그를 담고 줄바꿈문자를 추가합니다.
4. 통상 들여쓰기하는 태그라면 output에 태그를 담고 줄바꿈문자와 공백문자를 추가합니다.
5. 4. 에서 몇 칸 들여썼는지 기억해둡니다.
6. 들여쓰는 태그를 또 만나면 5. 에서 기억해 둔 칸에 2를 더해서 들여씁니다.
7. 닫는 태그를 만나면 5. 에서 기억해 둔 칸에 2를 빼서 들여씁니다.

문자열 길이가 0이 될 때까지 반복한 후 output을 반환합니다.

알고 있는 문제점

• 태그를 정확히 닫지 않으면 문제가 생깁니다.

  <table>
    <tr>
      <td>td 1...
    <tr>
      <td>td 2...
  </table>
  

  위 마크업 구조는 XHTML에서는 유효성 검사에 걸리지만, HTML로서는 올바른 마크업입니다. 하지만 이 프로그램은 암시적인 닫는 태그를 만들지 못하므로(만들 계획도 없습니다. 이 프로그램의 작성 목적은 마크업을 수정하지 않는 것입니다), "닫는 태그에서 들여쓰기 칸 수를 줄이지 못해서" 이런 웃기는 모양이 됩니다.

  <table>
    <tr>
      <td>td 1...
        <tr>
          <td>td 2...
            </table>
  

  td 뒤에 /td 없이 tr이 나왔다면 /td가 생략된 것이라고 인식하고 들여쓰기를 조절해야 맞지만, HTML 문법이 지나치게 관대하기 때문에 이 모든 경우의 수를 감안해서 조절하기는 매우 어렵습니다. 이 문제는 당분간 해결하지 못할 것으로 생각합니다. 이 프로그램은 마크업 구조는 전혀 손대지 않고 줄바꿈문자와 스페이스만 삽입하므로 모양은 우습겠지만 브라우저에는 똑같이 표현됩니다.