javascript - 自动从 HTML 文件中删除换行符

Question

我目前正在开发我自己的网格大小的框架。到目前为止，它正在按我想要的方式工作。但是，列之间有这个空间。 (请看这个JSFiddle)

我已经发现这个空格存在的原因是因为 HTML 中的换行符。

<div class="UIcolumn">
    1
</div>
<div class="UIcolumn">
    2
</div>

你在第二行看不到这个空格，我在其中删除了两列之间的换行符，中间没有任何空格。

<div class="UIcolumn">
    6
</div><div class="UIcolumn">
    7
</div>

我正在寻找一种自动删除所有这些换行符的方法。手动执行此操作不可取，因为页面会变得越来越大。

我尝试使用 $('body').html($('body').html().replace('\n','')) 删除换行符，这绝对行不通。我在 Google 上搜索过，但找不到任何解决我的问题的方法。

Answer 1

当您关心换行符时，它们不再是源代码中的换行符。它们是 DOM 中的空白文本节点。您可以使用 NodeIterator查找并删除它们:

function removeWhitespace(rootNode) {
  var nodeIterator = document.createNodeIterator(
    // Node to use as root
    rootNode,

    // Only consider nodes that are text nodes
    NodeFilter.SHOW_TEXT,

    // Object containing the function to use for the acceptNode method
    // of the NodeFilter
    { acceptNode: function(node) {
        // Accept nodes containing only whitespace
        if ( /^\s*$/.test(node.data) ) {
          return NodeFilter.FILTER_ACCEPT;
        } else {
          return NodeFilter.FILTER_SKIP;
        }
      }
    }
  );

  // Remove every empty text node that is a child of root
  var node;

  while ((node = nodeIterator.nextNode())) {
    node.parentNode.removeChild(node);
  }
}

这个removeWhitespace 函数需要一个Node ，不是 jQuery 对象，主要基于 MDN 对 NodeFilter 的引用示例.