HTMLファイルから改行を自動的に削除します

Question

私は現在、私自身のグリッドサイズのフレームワークで作業しています。それは私が今のところ望むように働いています。しかし、列の間にはこのスペースがあります。 （JSFiddleを参照してください）

私はすでにこのスペースがある理由は、HTMLの改行のためにあることを発見しました。

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

あなたは、私は2つの列の間に改行を削除2行目でこのスペースを見ていない、と任意のスペースが間にありません。

<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関数はjQueryオブジェクトではない、Nodeを取り、NodeFilterためMDNの参照に例に大きく基づいています。

Answer 2

これが空白なので、コンテナにfont-size:0を使用してそれを削除して、このような子要素にfont-size:initialを追加することができます。

@InzeNLによってテストの後、これはまた、JSを追加することによって動作します

UPDATEラインrow.css('fontSize',0)

$(function() { 
 
    UIresponsive(); 
 
    $(window).resize(UIresponsive); 
 

 
    function UIresponsive() { 
 
    var GRIDWIDTH = 12; 
 

 
    var currentSize = 'Small'; 
 

 
    var rows = $('[class^=UIrow],[class*=" UIrow"]'); 
 
    var columns = $('[class^=UIcolumn],[class*=" UIcolumn"]'); 
 

 
    rows.each(function() { 
 
     var row = $(this); 
 

 
     setSize(row, 'row'); 
 

 
     row.width(row.parent().width() - getWidthDifference(row)); 
 
    }); 
 

 
    columns.each(function() { 
 
     var column = $(this); 
 
     var row = column.parent(); 
 

 
     column.css('display', 'inline-block'); 
 

 
     setSize(column, 'column'); 
 

 
     var columnSize = Number(column.data('UIcolumn' + currentSize + 'Size')); 
 
     var rowSize = Number(row.data('UIrow' + currentSize + 'Size')); 
 

 
     if (isNaN(rowSize)) { 
 
     rowSize = GRIDWIDTH; 
 
     } 
 
     if (columnSize > rowSize) { 
 
     columnSize = rowSize; 
 
     } 
 

 
     column.width(Math.floor(columnSize/rowSize * row.width() - getWidthDifference(column))); 
 
    }); 
 

 
    function setSize(element, type) { 
 
     var elementClass = element.attr('class'); 
 

 
     if (elementClass.indexOf('UI' + type + '-') == 0 || elementClass.indexOf(' UI' + type + '-') >= 0) { 
 
     elementClass.split(' ').forEach(function(value, i) { 
 
      if (value.indexOf('UI' + type + '-') == 0) { 
 
      var sizes = value.replace('UI' + type + '-', '').split('-'); 
 
      if (sizes[0] != undefined) { 
 
       element.data('UI' + type + 'SmallSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'SmallSize', GRIDWIDTH); 
 
      } 
 
      if (sizes[1] != undefined) { 
 
       element.data('UI' + type + 'MediumSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'MediumSize', element.data('UI' + type + 'SmallSize')); 
 
      } 
 
      if (sizes[2] != undefined) { 
 
       element.data('UI' + type + 'BigSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'BigSize', element.data('UI' + type + 'MediumSize')); 
 
      } 
 
      if (sizes[3] != undefined) { 
 
       element.data('UI' + type + 'HugeSize', sizes[0]); 
 
      } else { 
 
       element.data('UI' + type + 'HugeSize', element.data('UI' + type + 'BigSizeSize')); 
 
      } 
 

 
      element.removeClass(value); 
 
      element.addClass('UI' + type); 
 
      } 
 
     }); 
 
     } else if (element.data('UI' + type + currentSize + 'Size') == undefined) { 
 
     if (type == 'column') { 
 
      element.data('UIcolumnSmallSize', 1); 
 
      element.data('UIcolumnMediumSize', 1); 
 
      element.data('UIcolumnBigSize', 1); 
 
      element.data('UIcolumnHugeSize', 1); 
 
     } else { 
 
      element.data('UIrowSmallSize', GRIDWIDTH); 
 
      element.data('UIrowMediumSize', GRIDWIDTH); 
 
      element.data('UIrowBigSize', GRIDWIDTH); 
 
      element.data('UIrowHugeSize', GRIDWIDTH); 
 
     } 
 
     } 
 
    } 
 

 
    function getWidthDifference(element) { 
 
     return Number(element.css('borderLeftWidth').replace('px', '')) + 
 
     Number(element.css('borderRightWidth').replace('px', '')) + 
 
     Number(element.css('marginLeft').replace('px', '')) + 
 
     Number(element.css('marginRight').replace('px', '')) + 
 
     Number(element.css('paddingLeft').replace('px', '')) + 
 
     Number(element.css('paddingRight').replace('px', '')); 
 
    } 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    outline-offset: 0; 
 
    outline: none; 
 
} 
 

 
.UIrow { 
 
    display: inline-block; 
 
    font-size: 0; 
 
} 
 

 

 
.UIcolumn { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    vertical-align: top; 
 
    font-size: initial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="UIrow-4"> 
 
    <div class="UIcolumn"> 
 
    1 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    2 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    3 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    4 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    5 
 
    </div> 
 
</div> 
 
<div class="UIrow-2 UIcolumn-6"> 
 
    <div class="UIcolumn"> 
 
    6 
 
    </div> 
 
    <div class="UIcolumn"> 
 
    7 
 
    </div> 
 
</div>