John Resig씨는 일요일 오후의 휴식시간을 가져야 할 것 같습니다. 그가 이번에 JavaScript로 HTML parser를 구현했거든요. 라이브러리를 이용해서 몇가지 방식으로 HTML을 공략할 수 있도록 합니다(데모는 여기서 실행해보세요):
A SAX-style API

태그, 텍스트, 주석을 콜백으로 다룹니다. 예를 들어, 단순한 HTML to XML 직렬화를 구현하려한다면 - 이런 식으로 할 수 있습니다:
[code:js]
var results = "";

HTMLParser("<p id=test>hello <i>world", {
  start: function( tag, attrs, unary ) {
    results += "<" + tag;
    for ( var i = 0; i <attrs.length; i++ )
      results += " " + attrs[i].name + '="' + attrs[i].escaped + '"';
    results += (unary ? "/" : "") + ">";
  },
  end: function( tag ) {
    results += "";
  },
  chars: function( text ) {
    results += text;
  },
  comment: function( text ) {
    results += "<!--" + text + "-->";
  }
});

results == '<p id="test">hello <i>world</i></p>'

XML Serializer

이제 앞의 것을 구현하는 것에 대한 걱정은 하실 필요가 없습니다. 라이브러리에 직접 포함되어있기 때문입니다. HTML을 집어넣으면 XML 문자열을 뱉어낼 것입니다
[code:js]
var results = HTMLtoXML("<p>Data: <input disabled/>")
results == "</p><p>Data: <input disabled="disabled"/></p>"

DOM Builder

HTML parser를 현존하는 DOM 문서(혹은 존재하는 DOM 엘리먼트 안에)에 삽입하기위해 사용하고 계시다면, htmlparser.js 가 그것을 다룰 수 있는 간단한 메소드를 제공합니다:
[code:js]
// The following is appended into the document body
HTMLtoDOM("<p>Hello <b>World", document)

// The follow is appended into the specified element
HTMLtoDOM("<p>Hello <b>World", document.getElementById("test"))

DOM Document Creator

이것은 DOM 빌더를 조금 더 개량한 버전입니다. 웹 페이지 전체 구조를 다루는 로직을 포함하고 있으며 새로운 DOM document를 반환합니다.
이 메소드에 의해 몇가지가 강제됩니다:
  • html, head, body, title 엘리먼트는 항상 존재할 것입니다.
  • 단 하나의 html, head, body, title 엘리먼트만 존재합니다(만약 사용자가 더 만들기를 원한다면, 적절한 위치로 옮겨져서 병합될 것입니다).
  • link, base 엘리먼트는 head에 위치하도록 강제됩니다.
이 메소드를 이렇게 사용할 수 있습니다:
[code:js]
var dom = HTMLtoDOM("<p>Data: <input disabled/>");
dom.getElementsByTagName("body").length == 1
dom.getElementsByTagName("p").length == 1

이 API를 사용할 수 있는 곳 중 하나는 아마도 서버측이 될 것입니다. 예를 들면, Aptana Jaxer같은 것이죠.

from HTML Parser in JavaScript on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0