Javascript 使用jQuery删除HTML元素之间的空白和换行符

使用jQuery，我想删除HTML标记之间的空白和换行符

var widgetHTML = '    <div id="widget">        <h2>Widget</h2><p>Hi.</p>        </div>';

var-widgetHTML='WidgetHi.
'；

应该是：

alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div>

警报（widgetHTML）；//你好

我认为我需要的模式是：

>[\s]*<

[\s]*<

---

不使用正则表达式可以实现这一点吗？

将HTML设置到DOM节点后，您可能会做得更好。一旦浏览器解析了所有内容并用我们的标记构建了一个DOM树，您就可以进行DOM漫游，对于您找到的每个文本节点，如果没有非空格字符，则将其完全删除，如果没有，则将其开头和结尾的空格修剪掉。

您可以

$.trim（widgetHTML）

读取周围的空白。

我想这样就可以了

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);
 }
}

cleanWhitespace:函数（元素）{
元素=$（元素）；
对于（var i=0；i

我尝试了user76888设计的技术，效果很好。为了方便起见，我将其打包到jQuery插件中，并认为社区可能会喜欢它，因此：

jQuery.fn.cleanWhitespace = function() {
    this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

要使用它，只需将其包含在脚本标记中，然后选择要使用jQuery清理的标记，并调用如下函数：

$('#widget').cleanWhitespace();

递归版本：

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;
}

---

这就是我的工作和一步一步的发现：

输出来自chrome控制台

首先定位包含讨厌的空格的父节点

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
" "
"    "
<label class=​"radio">​…​</label>​
" "
"    "
</div>​]

哦，天哪。。但是不要害怕！每个查询仍然返回以前的结构，而不是我们更改的结构，让我们看看我们最初的查询现在返回什么

$('.controls label[class="radio"]').parent();

[<div class=​"controls">​
<label class=​"radio">​…​</label>​
<label class=​"radio">​…​</label>​
</div>​]

$（'.controls label[class=“radio”]'）.parent（）；
[​
​…​​
​…​​
​]

还有Wallah！性感又漂亮=）

这就是jQuery风格下如何删除元素/标记之间的空白。

---

nJoy！

我不得不稍微修改接受的答案，因为出于某种原因，chrome不想删除空白节点上的child（）。如果发生这种情况，您可以使用空文本节点替换该节点，如本示例帮助器函数所示：

 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] );
      }
    }
  }

var removeWhiteSpaceNodes=函数（父级）{
var nodes=parent.childNodes；
对于（变量i=0，l=nodes.length；i

它接受一个要从中删除空白的节点，并递归地将所有空白子节点替换为真正的空文本节点。

使用

$($.parseHTML(widgetHTML, document, true)).filter("*"),

---

为什么要避免使用正则表达式？这是一个用正则表达式解决的足够简单的问题，任何其他问题似乎都会增加复杂性。@CamSoper请参见：+1.

$（''）.append（widgetHTML）

是一个开始。从这里开始，您在外部div中遍历子节点。在它的末尾调用

.html（）

您将获得不带空白节点的

widgetHTML

。这种方法很好，但它不适用于IE（不是9），因为它忽略textnodes，只计算实际节点。因此，您无法循环并删除它们：（但我还没有找到更好的方法……我是否可以建议在清理后添加一个

返回此；

？这将允许用户链接您的函数。好主意！这是其他所有jQuery函数都会做的，我的函数也应该做。完成。这正是我在调整它们之前删除JSP中按钮之间空白所需要的r页边距。我应该怎么做才能只删除出现在第一个非空节点之前的空节点？中间的其他空节点应该保持原样。感谢您的帮助…非常好！我将它命名为

removeWhitespace

，而不是

cleanWhitespace

。问题不在于修剪周围的空白创建html代码。这是关于删除html标记之间的空白。这比@user76888和@digital gabeg更有效。我只是稍微修改了它，以

返回这个；

就像@digital gabeg修改了他的操作。这解决了我在表中的空白问题，这是一个IE9错误。这在关闭后删除了空白标记以下字符串：“文本”更多文本

$($('.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|

$($('.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>​]

 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] );
      }
    }
  }

$($.parseHTML(widgetHTML, document, true)).filter("*"),