如何將HTML String 轉換爲 dom 元素

<p>前一段時間由於需求，因此把這方面的資料本身查詢規整了一下，以備後用。</p> <h1>DOMParser</h1> <p>對於開發者來講，咱們&quot;期盼&quot;的最好的方式固然是原生的瀏覽器支持，就像下面這樣</p> <div class="csharpcode"> <pre><span class="lnum"> 1: </span><span class="kwrd">var</span> parser = <span class="kwrd">new</span> DOMParser();</pre>

<pre><span class="lnum"> 2: </span><span class="kwrd">var</span> doc = parser.parseFromString(<span class="str">&quot;&lt;input /&gt;&quot;</span>, <span class="str">&quot;text/html&quot;</span>);</pre>

</div> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

<p><strong>Tips:</strong></p>

<ol> <li>parseFromString 返回的並不單單是一個 input 元素的 node， 而是一個完整的 Document <br /> </li>

<li>這裏是支持 script 標籤的， 可是當解析出的 dom 被添加到頁面時，script是不會被執行的 <br /></li>

<li>最好保證格式良好，不然可能並不會展示如咱們預期的 dom 結構</li> </ol>

<p></p>

<p>遺憾的是，DOMParser 對 HTML 的解析僅僅獲得了 Firefox 12+, IE 10+ 的支持，其他的瀏覽器均不支持，因此咱們要尋求瀏覽器兼容性更好的方法</p>

<h1>InnerHTML</h1>

<p>用 javascript 寫一個簡易的 parser 其實並非很難，基本的雛形就像下面這樣</p>

<div class="csharpcode"> <pre><span class="lnum"> 1: </span>(<span class="kwrd">function</span> (DOMParser) {</pre>

<pre><span class="lnum"> 2: </span> <span class="str">&quot;use strict&quot;</span>;</pre>

<pre><span class="lnum"> 3: </span>&#160;</pre>

<pre><span class="lnum"> 4: </span> <span class="kwrd">var</span></pre>

<pre><span class="lnum"> 5: </span> DOMParser_proto = DOMParser.prototype,</pre>

<pre><span class="lnum"> 6: </span> real_parseFromString = DOMParser_proto.parseFromString;</pre>

<pre><span class="lnum"> 7: </span>&#160;</pre>

<pre><span class="lnum"> 8: </span> <span class="rem">// Firefox/Opera/IE throw errors on unsupported types</span></pre>

<pre><span class="lnum"> 9: </span> <span class="kwrd">try</span> {</pre>

<pre><span class="lnum"> 10: </span> <span class="rem">// WebKit returns null on unsupported types</span></pre>

<pre><span class="lnum"> 11: </span> <span class="kwrd">if</span> ((<span class="kwrd">new</span> DOMParser).parseFromString(<span class="str">&quot;&quot;</span>, <span class="str">&quot;text/html&quot;</span>)) {</pre>

<pre><span class="lnum"> 12: </span> <span class="rem">// text/html parsing is natively supported</span></pre>

<pre><span class="lnum"> 13: </span> <span class="kwrd">return</span>;</pre>

<pre><span class="lnum"> 14: </span> }</pre>

<pre><span class="lnum"> 15: </span> } <span class="kwrd">catch</span> (ex) {}</pre>

<pre><span class="lnum"> 16: </span>&#160;</pre>

<pre><span class="lnum"> 17: </span> DOMParser_proto.parseFromString = <span class="kwrd">function</span> (markup, type) {</pre>

<pre><span class="lnum"> 18: </span> <span class="kwrd">if</span> (/^\s*text\/html\s*(?:;|$)/i.test(type)) {</pre>

<pre><span class="lnum"> 19: </span> <span class="kwrd">var</span></pre>

<pre><span class="lnum"> 20: </span> doc = document.implementation.createHTMLDocument(<span class="str">&quot;&quot;</span>);</pre>

<pre><span class="lnum"> 21: </span> <span class="kwrd">if</span> (markup.toLowerCase().indexOf(<span class="str">'&lt;!doctype'</span>) &gt; -1) {</pre>

<pre><span class="lnum"> 22: </span> doc.documentElement.innerHTML = markup;</pre>

<pre><span class="lnum"> 23: </span> } <span class="kwrd">else</span> {</pre>

<pre><span class="lnum"> 24: </span> doc.body.innerHTML = markup;</pre>

<pre><span class="lnum"> 25: </span> }</pre>

<pre><span class="lnum"> 26: </span> <span class="kwrd">return</span> doc;</pre>

<pre><span class="lnum"> 27: </span> } <span class="kwrd">else</span> {</pre>

<pre><span class="lnum"> 28: </span> <span class="kwrd">return</span> real_parseFromString.apply(<span class="kwrd">this</span>, arguments);</pre>

<pre><span class="lnum"> 29: </span> }</pre>

<pre><span class="lnum"> 30: </span> };</pre>

<pre><span class="lnum"> 31: </span>}(DOMParser));</pre>

</div> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>

<p>真正在使用時，咱們可能不但願返回的是一個完整的 Document， 而僅僅是一個 html 片斷，那採用下面的代碼也許更方便</p>

<div class="csharpcode"> <pre><span class="lnum"> 1: </span><span class="kwrd">function</span> parseStringToHTML(text) {</pre>

<pre><span class="lnum"> 2: </span> <span class="kwrd">var</span> i, a = document.createElement(<span class="str">&quot;div&quot;</span>),</pre>

<pre><span class="lnum"> 3: </span> b = document.createDocumentFragment();</pre>

<pre><span class="lnum"> 4: </span> a.innerHTML = text;</pre>

<pre><span class="lnum"> 5: </span> <span class="kwrd">while</span> (i = a.firstChild) b.appendChild(i);</pre>

<pre><span class="lnum"> 6: </span> <span class="kwrd">return</span> b;</pre>

<pre><span class="lnum"> 7: </span>}</pre>

</div>

<h1><style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style></h1>

<h1>jQuery</h1>

<p>若是需求的是一個更增強大，更加完善的解析方法，有很多 javascript 庫都提供了 這樣的功能，jQuery 也不例外，詳情請猛戳&#160; jQuery.parseHTML 方法 的 <a href="http://api.jquery.com/jQuery.parseHTML/">API</a>&#160; 和 <a href="https://github.com/jquery/jquery/blob/master/src/core/parseHTML.js">源碼</a> ， <a href="https://github.com/jquery/jquery/blob/master/src/manipulation.js">相關源碼</a> 。 jQuery 使用的其實仍然是 innerHTML ， 可是由於要支持更爲嚴格的 XHTML，爲了正確的關閉標籤，瀏覽器兼容性等問題，因此 parseHTML 要完成更多的工做。</p>

<p><strong><font size="6">Reference</font></strong></p>

<ol> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser">Mozilla Developer 上關於DOMParser的介紹</a></li>

<li><a href="http://api.jquery.com/jQuery.parseHTML/">jQuery.parseHTML 的API</a></li>

<li><a href="http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements">stackoverflow上的關於解析dom的提問</a></li>

<p><strong><font size="6"></font></strong></p> </ol>