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

Question

使用 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

这对我有用，也是一步一步的发现：

输出来自 chrome 控制台

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

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

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

您可以看到它被包裹在 [] 括号中的数组中，即使找到单个项目，jQuery 也会始终返回类似数组的结构。

因此，为了获取 HTMLElement，我们在索引 0 处获取数组中的第一项

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

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

注意没有更多的 [] 括号。我们需要这样做的原因是因为 jQuery 会忽略 dom 中的空格，但 HTMLElement 不会，看看当我们访问 childNodes 属性时会发生什么

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

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

我们又得到了一个数组，是的，你发现了 [] 括号，但你是否看到了另一个不同之处，看看所有的逗号，这是我们用 jQuery 做不到的。 谢谢 HTMLElement，但现在我们可以回到 jQuery，因为我想使用 each 而不是 for 循环，你同意我的观点吗？ 因此，让我们将数组包装在 jQuery 中，看看会发生什么：

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

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

完美！我们仍然有完全相同的结构，但现在在一个 jQuery 对象中，所以让我们调用每个并将“this”打印到控制台以查看我们有什么。

$($('.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，标准的东西 `$(this).html 并且因为我们看不到空格，所以用管道 | 填充它，好计划但是我们在这里有什么？ 如您所见，jQuery 无法将空格转换为 html，现在我们有未定义的。但这更好，因为空间可能是真实的 undefined 肯定是虚假的 =)

所以让我们摆脱 jQuery 的笨蛋。我们只需要$(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>​]

还有沃拉！性感又漂亮 =)

那么你有它，如何删除元素/标签之间的空白 ala jQuery 样式。

开心！

Answer 6

我不得不稍微修改接受的答案，因为由于某种原因，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] );
      }
    }
  }

它需要一个您要从中删除空格的节点，然后递归地用一个真正空的文本节点替换所有空格子节点。

Answer 7

使用

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

Answer 8

您可以$.trim(widgetHTML); 来读取周围的空白。