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

我尝试了用户76888布局的技术并且运行良好。为方便起见，我把它打包成一个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不想在空白节点上删除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] );
      }
    }
  }

需要从中删除空格的节点，递归用真正空的textnode替换所有空白子节点。

Answer 6

使用

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

Answer 7

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

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

7 个答案: