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'}); });
编辑
.find()
方法需要一些工作,因为它删除了空白容器。想象<pre><span>Code</span> <span>Here</span></pre>
,这将变成<span>Code</span><span>Here</span>
(删除空格)。
最佳答案
一种通用的解包方法是简单地遍历字符串,无论是针对最外层的标签还是针对特定标签,将不属于标签的每个字符添加到新字符串中(一旦您点击了 <,检查整个标签)。一旦找到,就从 0 开始计数器并继续遍历字符串直到找到它的结束标记,将每个字符添加到新字符串中。如果此时计数器为 0,则跳过标记并将原始字符串的其余部分添加到新字符串中。每当您遇到任何类型的开始标签时,请在柜台添加一个。任何结束标签,减去 1(这样你就不会最终从嵌套标签中删除结束标签)。
我不能真正谈论内存管理,因为我不熟悉 javascript 如何管理内存。
希望对您有所帮助。
关于javascript - jQuery:展开 HTML 字符串中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7013498/