纯JavaScript的HTML解析器 Pure JavaScript HTML Parser

jopen 12年前
     <p>这是一个纯 JavaScript 的 HTML 文档解析器,<a href="/misc/goto?guid=4959499582064056383" target="_blank">在线演示</a>。</p>    <p>示例代码:</p>    <div class="syntax_hilite">     <div id="js-1">      <div>       <span style="color:#003366;font-weight:bold;">var</span> results =       <span style="color:#3366cc;">""</span>;       <p>HTMLParser<span style="color:#008800;font-weight:bold;">(</span><span style="color:#3366cc;">"<p id=test>hello <i>world"</span>, <span style="color:#008800;font-weight:bold;">{</span><br />   start: <span style="color:#003366;font-weight:bold;">function</span><span style="color:#008800;font-weight:bold;">(</span> tag, attrs, unary <span style="color:#008800;font-weight:bold;">)</span> <span style="color:#008800;font-weight:bold;">{</span><br />     results += <span style="color:#3366cc;">"<"</span> + tag;</p>       <p>    <span style="color:#000066;font-weight:bold;">for</span> <span style="color:#008800;font-weight:bold;">(</span> <span style="color:#003366;font-weight:bold;">var</span> i = <span style="color:#cc0000;">0</span>; i < attrs.<span style="color:#006600;">length</span>; i++ <span style="color:#008800;font-weight:bold;">)</span><br />       results += <span style="color:#3366cc;">" "</span> + attrs<span style="color:#008800;font-weight:bold;">[</span>i<span style="color:#008800;font-weight:bold;">]</span>.<span style="color:#006600;">name</span> + <span style="color:#3366cc;">'="'</span> + attrs<span style="color:#008800;font-weight:bold;">[</span>i<span style="color:#008800;font-weight:bold;">]</span>.<span style="color:#006600;">escaped</span> + <span style="color:#3366cc;">'"'</span>;</p>       <p>    results += <span style="color:#008800;font-weight:bold;">(</span>unary ? <span style="color:#3366cc;">"/"</span> : <span style="color:#3366cc;">""</span><span style="color:#008800;font-weight:bold;">)</span> + <span style="color:#3366cc;">">"</span>;<br />   <span style="color:#008800;font-weight:bold;">}</span>,<br />   end: <span style="color:#003366;font-weight:bold;">function</span><span style="color:#008800;font-weight:bold;">(</span> tag <span style="color:#008800;font-weight:bold;">)</span> <span style="color:#008800;font-weight:bold;">{</span><br />     results += <span style="color:#3366cc;">"</"</span> + tag + <span style="color:#3366cc;">">"</span>;<br />   <span style="color:#008800;font-weight:bold;">}</span>,<br />   chars: <span style="color:#003366;font-weight:bold;">function</span><span style="color:#008800;font-weight:bold;">(</span> text <span style="color:#008800;font-weight:bold;">)</span> <span style="color:#008800;font-weight:bold;">{</span><br />     results += text;<br />   <span style="color:#008800;font-weight:bold;">}</span>,<br />   comment: <span style="color:#003366;font-weight:bold;">function</span><span style="color:#008800;font-weight:bold;">(</span> text <span style="color:#008800;font-weight:bold;">)</span> <span style="color:#008800;font-weight:bold;">{</span><br />     results += <span style="color:#3366cc;">"<!--"</span> + text + <span style="color:#3366cc;">"-->"</span>;<br />   <span style="color:#008800;font-weight:bold;">}</span><br /> <span style="color:#008800;font-weight:bold;">}</span><span style="color:#008800;font-weight:bold;">)</span>;</p>       <p>results == <span style="color:#3366cc;">'<p id="test">hello <i>world</i></p>" </span></p>      </div>     </div>    </div>    <br />    <p><strong>项目主页:</strong><a href="http://www.open-open.com/lib/view/home/1324433201468" target="_blank">http://www.open-open.com/lib/view/home/1324433201468</a></p>