Automatically remove linebreaks from HTML file

Question

I'm currently working on my own grid-sized framework. It's working as I want so far. However, there's this space between the columns. (Please see this JSFiddle)

I've already found that the reason this space is there is because of the linebreaks in HTML.

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

You don't see this space in the second row, where I removed the linebreak between the two columns, and there isn't any space in between.

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

I'm looking for a way to automatically remove all these linebreaks. It's not an option to do this by hand as the pages will grow larger and larger.

I've tried removing linebreaks by using $('body').html($('body').html().replace('\n','')), which definitely didn't work. I've searched around on Google, but couldn't find anything that fixes my problem.

AuxTaco · Accepted Answer · 2017-12-03 12:08:27Z

1

By the time you care about the line breaks, they're not line breaks in source code anymore. They're whitespace text nodes in the DOM. You can use a NodeIterator to find and remove them:

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);
  }
}

This removeWhitespace function takes a Node, not a jQuery object, and is based heavily on the example on MDN's reference for NodeFilter.

answered Dec 3, 2017 at 12:08

AuxTaco

5,2011 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

InzeNL Over a year ago

I had overlooked this answer. This works amazing. This way, text that's placed in a row (and not inside a column) is also shown.

Temani Afif · Accepted Answer · 2017-12-03 11:51:27Z

This is white spaces, so can remove it using font-size:0 on containers and add font-size:initial to child elements like this :

UPDATE

After testing by @InzeNL this will work by also adding a JS line 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>

This would indeed work for the first row. However, this framework has the option to have a row be a column as well (see second row), and it that case it doesn't work JSFiddle
@InzeNL ok i see, so it's very dependant on the framework you are using
Managed to solve this by adding a line to the JavaScript JSFiddle row.css('fontSize',0); which would override the column fontSize

Collectives™ on Stack Overflow

Automatically remove linebreaks from HTML file

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related