John Resig씨는 일요일 오후의 휴식시간을 가져야 할 것 같습니다. 그가 이번에 JavaScript로 HTML parser를 구현했거든요. 라이브러리를 이용해서 몇가지 방식으로 HTML을 공략할 수 있도록 합니다(데모는 여기서 실행해보세요):
from HTML Parser in JavaScript on Ajaxian
A SAX-style API이 API를 사용할 수 있는 곳 중 하나는 아마도 서버측이 될 것입니다. 예를 들면, Aptana Jaxer같은 것이죠.
태그, 텍스트, 주석을 콜백으로 다룹니다. 예를 들어, 단순한 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
from HTML Parser in JavaScript on Ajaxian
'[IT] Web Tech' 카테고리의 다른 글
Dojo 메소드를 Flash 로 포팅하기 (0) | 2008.05.10 |
---|---|
브라우저별 버튼 여백 자세히 뜯어보기 (0) | 2008.05.10 |
IE와 Windows XP 서비스팩 3... 아직도 IE6 (2) | 2008.05.10 |
Ajax 개척자 주간 : Prototype의 Sam Stephenson (0) | 2008.05.10 |
JavaScript로 만든 HTML Parser (0) | 2008.05.10 |
Canvas와 PNG를 이용한 압축 (2) | 2008.05.09 |
It's Business Time : Google I/O로의 자유 이용권 (0) | 2008.05.08 |
Ajaxian Featured Tutorial : YSlow를 이용한 성능 분석 (0) | 2008.05.08 |
우리는 JavaScript 라이브러리 개발자들이다. 우리의 외침을 들어라! (0) | 2008.05.07 |
댓글을 달아 주세요