Remove Whitespace and Line Breaks Between HTML Elements Using Jquery

Remove whitespace and line breaks between HTML elements using jQuery

I tried the technique that user76888 laid out and it worked nicely. I packaged it into a jQuery plugin for convenience, and thought the community might enjoy it, so here:

jQuery.fn.cleanWhitespace = function() {
    this.contents().filter(
        function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
        .remove();
    return this;
}

To use this, just include it in a script tag, then select a tag to clean with jQuery and call the function like so:

$('#widget').cleanWhitespace();

How to remove line breaks and white space from variable in jQuery

Any of your examples will work if you assign the filtered value back to the variable:

var id = $tr.data('contact-id');
id = id.replace(/ /g, '');

However I'd recommend you to use $.trim method instead:

var id = $.trim( $tr.data('contact-id') );

It will remove the spaces from the start and from the end of the value.

Finally Python has strip method, which does exactly the same:

id = id.strip()

Using jquery/javascript: How to remove whitespaces and keep breaks without being able to edit the html

You can simply use innerText

function strip() {    
  document.querySelector('#pstad-descrptn').value =
    document.querySelector('#item-info-container').innerText
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="thebutton" value="strip" onclick="strip();">
<textarea id="pstad-descrptn" name="description" data-val="true" cols="78" rows="20"></textarea>

<div id="item-info-container" class="clipboard copied re-copy" data-clipboard-target="#item-info-container">
                <div id="item-pre-description">
                                      <h2 class="h5">Product details:</h2>                      <div class="product-details__columns">                          <p class="product-details__column">                              <strong>Item Number:</strong>                              <span id="product-unique-id">000800209270</span>                          </p>                              <p class="product-details__column">                                  <strong>Brand:</strong>                                  <span>Nikon</span>                              </p>                              <p class="product-details__column">                                  <strong>Model Number:</strong>                                  <span>D3500</span>                              </p>                              <p class="product-details__column">                                  <strong>Colour:</strong>                                  <span>Black</span>                              </p>                              <p class="product-details__column">                                  <strong>Number of Lenses:</strong>                                  <span>2</span>                              </p>                      </div>                                  </div>
                <div id="item-description">
                This Nikon D3500 camera body comes with<br><br>Nikon 18-55mm 1:3.5-5.6G VR Lens<br>Nikon 70-300mm 1:4.5-6.3G ED VR Lens<br>1 battery & charger.<br><br>Shutter count: 426<br><br>The camera and both lens are in perfect working order, and is showing hardly any visible wear (please see photos).<br><br>For more information on this or any other item you may have seen please feel free to send me an email and I will respond as soon as possible.<br><br>                </div>
                
            </div>

Removing whitespace between HTML elements when using line breaks

You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate.

Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.

How to remove all line breaks from a string

Line breaks (better: newlines) can be one of Carriage Return (CR, \r, on older Macs), Line Feed (LF, \n, on Unices incl. Linux) or CR followed by LF (\r\n, on WinDOS). (Contrary to another answer, this has nothing to do with character encoding.)

Therefore, the most efficient RegExp literal to match all variants is

/\r?\n|\r/

If you want to match all newlines in a string, use a global match,

/\r?\n|\r/g

respectively. Then proceed with the replace method as suggested in several other answers. (Probably you do not want to remove the newlines, but replace them with other whitespace, for example the space character, so that words remain intact.)

jQuery.text() retrieves all spaces and line returns from HTML element

You can read the innerText property:

$(function() {
  let str = $('#address').prop('innerText');
  $('textarea.paste').val(str);
});

div {
  display: inline-block;
  margin-top: 10px;
}

<table>
  <tbody>
    <tr>
      <td id="address">
        Some word<br>

        Some
        more
        words
      </td>
    </tr>
  </tbody>
</table>

<div>
  <code>innerText</code> output:<br>
  <textarea class="paste" rows="7"></textarea>
</div>
<div>
  Expected output:<br>
  <textarea rows="7">Some word
Some more words</textarea>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery remove() or after() causing whitespace to be removed

The reason this is happening is because you added a block element(div), the block element breaks into a new line, then when it's removed, it takes away the whitespace with it that's after it, because for HTML a whitespace and a newline is pretty much the same.

You have several solutions, some were mentioned here :

1. Use  
2. Put a space inside the <i> tag instead of between tags, so <i> word</i> would work fine.
3. Use a <span> tag instead of a div tag on the after.

How do I remove line break sensitivity in html?

I would recommend putting them into a div with display:flex; flex-direction:row;

---

Related Topics