使用jQuery，我想删除HTML标记之间的空格和换行。
var widgetHTML = ' <div id="widget"> <h2>Widget</h2><p>Hi.</p> </div>';
应该：
alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div>
我想我会需要的模式是：
>[\s]*<
这能不使用正则表达式来实现？
Answer 1:
我想，user76888奠定了技术和它很好工作。 我打包成一个jQuery插件，为了方便，并认为社区可能会喜欢它，所以在这里：
jQuery.fn.cleanWhitespace = function() {
this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
}
要使用此功能，只需将其包含在脚本标记，然后选择一个标签来进行清洗jQuery和调用该函数如下所示：
$('#widget').cleanWhitespace();
Answer 2:
递归版本：
jQuery.fn.htmlClean = function() {
this.contents().filter(function() {
if (this.nodeType != 3) {
$(this).htmlClean();
return false;
}
else {
this.textContent = $.trim(this.textContent);
return !/\S/.test(this.nodeValue);
}
}).remove();
return this;
}
Answer 3:
我认为这会做...
cleanWhitespace: function(element) {
element = $(element);
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
Element.remove(node);
}
}
Answer 4:
你也许可以做到设置成HTML DOM节点后，这更好。 一旦浏览器解析了一切，并建立了一个DOM树我们的标记，你可以做一个DOM的步行路程，为您找到每一个文本节点，或者完全删除它，如果它没有非空白字符，或修剪空白关闭开始如果确实如此的它结束。
Answer 5:
这是对我和一步一步发现什么工作：
输出是由铬控制台
第一locato含有讨厌的空白父节点
$('.controls label[class="radio"]').parent();
[<div class="controls">
<label class="radio">…</label>
" "
" "
<label class="radio">…</label>
" "
" "
</div>]
你可以看到这个被包裹在从括号[] jQuery的数组将始终返回状结构数组，即使单个项目已被发现。
所以去的HTML元素，我们采取的第一个项目阵列中的索引0
$('.controls label[class="radio"]').parent()[0];
<div class="controls">
<label class="radio">…</label>
" "
" "
<label class="radio">…</label>
" "
" "
</div>
注意如何有没有更多的括号[]。 我们需要做的原因是因为jQuery会忽略DOM的空白，但HTML元素不会，看看当我们访问的childNodes属性会发生什么
$('.controls label[class="radio"]').parent()[0].childNodes;
[<label class="radio">…</label>,
" ",
" ",
<label class="radio">…</label>,
" ",
" "]
我们再有一个数组，是你当场括号[]，但你看到另一个不同之处，看看所有的逗号，这是我们无法用jQuery获得。 谢谢HTML元素，但现在我们可以回到jQuery的，因为我要为循环而使用的每一个，你同意我的观点？ 因此，让包裹在数组中jQuery和看看会发生什么：
$($('.controls label[class="radio"]').parent()[0].childNodes);
[<label class="radio">…</label>,
" ",
" ",
<label class="radio">…</label>,
" ",
" "]
完善！ 我们有完全相同的结构，但还是一个nnow jQuery对象内，从而使每个调用并打印“本”，以安慰，看看我们有什么。
$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () {
console.log('|'+$(this).html()+'|');
});
|<input id="gender_f" name="gender" type="radio" value="f">Female|
|undefined|
|undefined|
|<input id="gender_m" name="gender" type="radio" value="m" checked="">Male|
|undefined|
|undefined|
因此，我们使用jQuery来获取每一个元素，标准的东西`$（本）的.html的HTML和，因为我们看不到的空白让垫它与管道|，良好的计划，但我们有什么在这里？ 正如你所看到的jQuery是不是能够把空白HTML和现在我们已经不确定的。 但由于其中的空间可能是truthy undefined是绝对falsy这是更好=）
所以，让我们摆脱使用jQuery的吸盘。 我们需要的是$(this).html() || $(this).remove(); $(this).html() || $(this).remove(); 让我们来看看：
$($('.controls label[class="radio"]').parent()[0].childNodes).each(function () {
$(this).html() || $(this).remove();
});
[<label class="radio">…</label>,
" ",
" ",
<label class="radio">…</label>,
" ",
" "]
哦，亲爱的..但不要害怕！ 每个仍返回先前的结构不是一个我们已经改变了，让我们看看有什么我们最初的查询现在返回。
$('.controls label[class="radio"]').parent();
[<div class="controls">
<label class="radio">…</label>
<label class="radio">…</label>
</div>]
和Wallah！ 所有的性感和漂亮=）
所以你有它，如何阿拉jQuery的风格元素/标签之间的空格去掉。
的nJoy！
Answer 6:
我不得不修改接受的答案一点，因为某种原因铬不想removeChild之（）上的空白节点。 如果发生这种情况，你可以替换就像这个例子助手功能的空文本节点的节点：
var removeWhiteSpaceNodes = function ( parent ) {
var nodes = parent.childNodes;
for( var i =0, l = nodes.length; i < l; i++ ){
if( nodes[i] && nodes[i].nodeType == 3 && !/\S/.test( nodes[i].nodeValue ) ){
parent.replaceChild( document.createTextNode(''), nodes[i] );
}else if( nodes[i] ){
removeWhiteSpaceNodes( nodes[i] );
}
}
}
它从要删除空白节点和递归与一个真正空textnode替换所有空白的孩子。
Answer 7:
使用
$($.parseHTML(widgetHTML, document, true)).filter("*"),
Answer 8:
你可以$.trim(widgetHTML); 得到读取周围的空白。
文章来源: Remove whitespace and line breaks between HTML elements using jQuery
