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

我目前正在开发自己的网格大小的框架。到目前为止，它正按我所希望的那样工作。但是，在列之间有这个空间。（请看这个）

我已经发现这个空间之所以存在是因为HTML中的换行符

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

1.
2.

您在第二行中看不到这个空格，在那里我删除了两列之间的换行符，并且在这两列之间没有任何空格

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

6.
7.

我正在寻找一种方法来自动删除所有这些换行符。这不是一个选择，这样做的手，因为网页将越来越大

---

我尝试过使用

$（'body'）.html（$（'body'）.html（）.replace（'\n'，''）

删除换行符，但这显然不起作用。我已在上搜索过，但找不到任何解决问题的方法。

这是空白，因此可以使用容器上的

font-size:0

将其删除，并将

font-size:initial

添加到子元素中，如下所示：

更新

在@InzeNL进行测试后，还可以添加一个JS行

row.css（'fontSize'，0）

$（函数（）{
UIresponsive（）；
$（窗口）。调整大小（UIR）；
函数UIresponsive（）{
var-GRIDWIDTH=12；
var currentSize=‘小’；
变量行=$（'[class^=UIrow]，[class*=UIrow]'；
var columns=$（'[class^=UIcolumn]，[class*=UIcolumn]'）；
行。每个（函数（）{
var行=$（此）；
设置大小（行，'行'）；
row.width（row.parent（）.width（）-getWidthDifference（row））；
});
columns.each（函数（）{
var列=$（此）；
var row=column.parent（）；
css（'display'，'inline block'）；
设置大小（列，'列'）；
var columnSize=Number（column.data（'UIcolumn'+currentSize+'Size'））；
var rowSize=编号（行数据（'UIrow'+currentSize+'Size'）；
if（isNaN（行大小））{
rowSize=网格宽度；
}
如果（列大小>行大小）{
列大小=行大小；
}
列宽（数学层（columnSize/rowSize*row.width（）-getWidthDifference（column））；
});
函数设置大小（元素、类型）{
var elementClass=element.attr（'class'）；
如果（elementClass.indexOf（'UI'+type+'-'））==0 | | elementClass.indexOf（'UI'+type+'-'）>=0）{
elementClass.split（“”）.forEach（函数（值，i）{
if（value.indexOf（'UI'+type+'-'）==0）{
变量大小=值。替换（'UI'+类型+'-'，''）。拆分（'-'）；
如果（大小[0]！=未定义）{
元素数据（'UI'+类型+'SmallSize'，大小[0]）；
}否则{
元素数据（'UI'+类型+'SmallSize'，GRIDWIDTH）；
}
如果（尺寸[1]！=未定义）{
元素数据（'UI'+类型+'MediumSize'，大小[0]）；
}否则{
element.data（'UI'+type+'MediumSize'，element.data（'UI'+type+'SmallSize'）；
}
如果（尺寸[2]！=未定义）{
元素数据（'UI'+type+'BigSize'，大小[0]）；
}否则{
element.data（'UI'+type+'BigSize'，element.data（'UI'+type+'MediumSize'））；
}
如果（尺寸[3]！=未定义）{
元素数据（'UI'+类型+'HugeSize'，大小[0]）；
}否则{
element.data（'UI'+type+'HugeSize'，element.data（'UI'+type+'bigsize'）；
}
元素。removeClass（值）；
element.addClass（'UI'+类型）；
}
});
}else if（element.data（'UI'+类型+当前大小+'Size'）==未定义）{
如果（类型=='列'）{
元素。数据（'UIColumnSallsize'，1）；
元素数据（'UIcolumnMediumSize'，1）；
元素。数据（'UIcolumnBigSize'，1）；
元素数据（'UIcolumnHugeSize'，1）；
}否则{
数据（'uirowsallsize'，GRIDWIDTH）；
元素数据（'UIrowMediumSize'，GRIDWIDTH）；
数据（'UIrowBigSize'，GRIDWIDTH）；
数据（'UIrowHugeSize'，GRIDWIDTH）；
}
}
}
函数getWidthDifference（元素）{
返回编号（element.css（'borderLeftWidth'）。replace（'px'，''）+
编号（element.css（'borderRightWidth'）。替换（'px'，''）+
编号（element.css（'marginLeft'）。replace（'px'，''）+
编号（element.css（'marginRight'）。替换（'px'，''）+
编号（element.css（'paddingLeft'）。替换（'px'，''）+
编号（element.css（'paddingRight'）。替换（'px'，''）；
}
}
});
正文{
保证金：0；
填充：0；
边界：无；
轮廓偏移：0；
大纲：无；
}
尤罗先生{
显示：内联块；
字号：0；
}
.UIcolumn{
显示：内联块；
边框：1px纯黑；
垂直对齐：顶部；
字号：首字母；
}

1.
2.
3.
4.
5.
6.
7.
当您关心换行符时，它们不再是源代码中的换行符。它们是DOM中的空白文本节点。您可以使用查找和删除它们：

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
函数采用的是一个，而不是jQuery对象，并且在很大程度上基于MDN的引用示例。
这确实适用于第一行。但是，这个框架也可以选择将一行作为一列（参见第二行），在这种情况下@InzeNL ok我明白了，所以它非常依赖于您使用的框架，通过在JavaScript
row.css（'fontSize'，0）中添加一行来解决这个问题将覆盖该列fontSize@InzeNL是的，像这样您将使用内联样式；）@如果你不介意的话，我会在我的回答中加上这个。我忽略了这个答案。这真是太棒了。这样，也会显示放置在行中（而不是列中）的文本。