Question

我正在尝试找到解开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'});
                });

修改

.find()方法需要一些工作，因为它会删除空白容器。想象一下<pre>Code Here</pre>，它会变成CodeHere（丢弃的空白）。

Answer 1

解开它的一种通用方法是简单地遍历字符串，对于最外面的标记或特定标记，将不是标记一部分的每个字符添加到新字符串中（一旦你点击＆lt; ，检查整个标签）。找到后，在0处启动计数器并继续遍历字符串，直到找到其结束标记，将每个字符添加到新字符串中。如果此时计数器为0，则跳过标记并将原始字符串的其余部分添加到新字符串。只要您遇到任何类型的开始标记，请在计数器中添加一个标记。任何结束标记，减去1（因此您最终不会从嵌套标记中删除结束标记）。

我无法真正对内存管理说话，因为我不熟悉javascript如何管理内存。

我希望我得到了一些帮助。

Answer 2

目前还不清楚你的实际问题是什么，但我可以预见到两个可能的困难。

.html()仅返回一组HTML元素的内容，而不是标记本身
.find()仅搜索后代节点，而不是搜索提供的节点。

在调用这些方法之前，可以通过在HTML周围添加额外标记来解决这两个问题。

编辑我认为你所追求的是：

jQuery($html).filter('pre').children('div').appendTo('#wanted');

.filter()行适用于顶级元素，而不适用于其后代。

在调用.appendTo()方法之前，元素不会添加到真实DOM中。

jQuery：在HTML字符串中展开元素

HTML

CSS

的JavaScript

修改

2 个答案: