javascript - jQuery:展开 HTML 字符串中的元素

Question

http://jsfiddle.net/vol7ron/vZLnr/

我正在尝试找到解包 HTML 字符串(如 AJAX 响应)的最佳方法，而无需先将其附加到文档。另外，哪个最适合内存管理？

HTML

• <div class="label">Start With:</div>
  <pre id="original"></pre>
  
  <div class="label">What's Wanted:</div>
  <pre id="wanted"><div>foo</div><div>bar</div></pre>
  
  <hr />
  
  <div class="label">Attempt: .find()</div>
  <pre id="find"></pre>
  
  <div class="label">Attempt: .closest()</div>
  <pre id="closest"></pre>
  

CSS

• .label    { font       : italic bold 11px Georgia;   margin    : 1em 0 .5em; }
  pre       { border     : 1px solid black;            padding   : 1em;        }
  hr        { margin     : 1.5em 0 1em; }
  
  #original { background : #eee; }
  #wanted   { background : #def; }
  

JavaScript

•    var $html= "<pre><div>foo</div></pre><pre><div>bar</div></pre>";
  
     // No Changes
     jQuery('#original').html($html);
  
  
     // Find
     var $find = jQuery($html).find('*').unwrap();
     jQuery('#find').html($find);
  
  
     // Closest
     var $closest = jQuery($html).closest('pre').unwrap().html();
     jQuery('#closest').html($closest);
  
  
     // Wrapped
     var $pre = jQuery('pre', jQuery($html).wrap('<div />').parent() );
     $pre.each(function(){
                  jQuery('#wrapped').append(jQuery(this).html());
              });
  
     //=========== Prettify Output ===========
     var $wanted = jQuery('#wanted').html();
     jQuery('pre').not('#wanted, #original, #original *')
                  .each(function(){
                    var t = jQuery(this);
                    t.css({background: t.html()==$wanted?'#efe':'#fee'});
                  });
  

---

编辑

1. .find()方法需要一些工作，因为它删除了空白容器。想象<pre><span>Code</span> <span>Here</span></pre> ，这将变成 <span>Code</span><span>Here</span> (删除空格)。

Answer 1

一种通用的解包方法是简单地遍历字符串，无论是针对最外层的标签还是针对特定标签，将不属于标签的每个字符添加到新字符串中(一旦您点击了 <,检查整个标签)。一旦找到，就从 0 开始计数器并继续遍历字符串直到找到它的结束标记，将每个字符添加到新字符串中。如果此时计数器为 0，则跳过标记并将原始字符串的其余部分添加到新字符串中。每当您遇到任何类型的开始标签时，请在柜台添加一个。任何结束标签，减去 1(这样你就不会最终从嵌套标签中删除结束标签)。

我不能真正谈论内存管理，因为我不熟悉 javascript 如何管理内存。

希望对您有所帮助。