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

Posted 2023-02-22

【中文标题】使用 jQuery 删除 HTML 元素之间的空格和换行符

【英文标题】：Remove whitespace and line breaks between HTML elements using jQuery

【发布时间】：2010-12-05 02:13:00

【问题描述】：

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

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

【问题讨论】：

为什么要避免使用正则表达式？这是一个用正则表达式解决的足够简单的问题，其他任何事情似乎都会增加复杂性。

@CamSoper 见：***.com/a/1732454/59087

【参考方案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();

【讨论】：

我可以建议在清理之后添加return this; 吗？这将允许用户链接您的功能。

好主意！这就是所有其他 jQuery 函数所做的，我的函数也应该这样做。完成。

在调整它们的边距之前，我需要删除 JSP 中按钮之间的空白。

我应该怎么做才能只删除出现在第一个 nonEmpty 节点之前的那些空节点？介于两者之间的其他空节点应保持原样。感谢您的帮助...

非常好！不过，我将其命名为 removeWhitespace 而不是 cleanWhitespace。

【参考方案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;

【讨论】：

这比@user76888 和@the-digital-gabeg 效果更好，我只是将它稍微修改为return this;，就像@the-digital-gabeg 修改了他的做法一样。这解决了我在表格中的空白问题，这是一个 IE9 错误。

这将删除以下字符串中结束强标记后的空格：“text more text.”

【参考方案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);
 

【讨论】：

这个方法很棒，但它不适用于 IE（不是 9），因为它忽略了文本节点，只计算实际节点。所以你不能遍历它们并删除它们:(但我还没有找到更好的方法......

【参考方案4】：

在将 HTML 设置为 DOM 节点后，您可能会做得更好。一旦浏览器解析了所有内容并从我们的标记中构建了一个 DOM 树，您就可以对找到的每个文本节点进行 DOM 遍历，如果它没有非空白字符，则将其完全删除，或者从一开始就修剪空白如果是，则结束。

【讨论】：

+1。 $('<div>').append(widgetHTML) 是一个开始。从那里您可以在外部 div 内遍历子节点。最后调用.html()，你会得到你的widgetHTML，没有空的空白节点。

【参考方案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 样式。

开心！

【参考方案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] );
      
    
  

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

【参考方案7】：

使用

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

【参考方案8】：

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

【讨论】：

问题不在于修剪 html 代码周围的空格。它是关于删除 html 标签之间的空格。