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

Question

I've tried to implement the solution of this site but that didn't work, I have tried many things to try to solve my issue. In my code below that'st he closet I can get and even then it's not what I'm after.

Trying to achieve:

I'm copying html from a div and placing it inside of a textrea.
I strip the html but keep the line breaks.

However due to the html being used from a third party site, I have no control over the way the 'html' is structed. As in the extra spaces seen in the code. The following code should be nice and neat in the textarea and look like:

Textarea data should be formated to look like:

Product details:

Item Number: 000800209270

Brand: Nikon

Model Number: D3500

Colour: Black

Number of Lenses: 2

This Nikon D3500 camera body comes with Nikon 18-55mm 1:3.5-5.6G VR Lens Nikon 70-300mm 1:4.5-6.3G ED VR Lens 1 battery & charger.

Shutter count: 426

The camera and both lens are in perfect working order, and is showing hardly any visible wear (please see photos).

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.

    function strip() {
        $("#pstad-descrptn").text($('#item-info-container').text());
    setTimeout(
    function() {
            jQuery.fn.cleanWhitespace = function() {
        this.contents().filter(
            function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
            .remove();
        return this;
        }
        $('#item-info-container').cleanWhitespace();
        $('#pstad-descrptn').cleanWhitespace();
    }, 200 );

    };

<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 &amp; 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>

I'm at my wits end I've tried so many 'white-space' removing techniques, javascript and css to no prevail. Please someone save me from my misery. Thanks a million!

Someone just edited the html code without reading my question and removed all the spaces which negates my question? I have to work with the html having those spaces in the code. The question is how to remove those spaces in the html using jquery/javascript. I've rolled it back to my original code. Thank you — aussiedan, Nov 03 '20 at 11:05

apple apple · Accepted Answer · 2020-11-04T13:59:16.280

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 &amp; 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>

I want the pre-description to be a block of code with no spaces only line breaks.

You then need to separate the paragraphs and combine them (and eliminate double line ending at first paragraph)

function strip() {
  let item_pre_desc = document.querySelector('#item-pre-description')
  let item_desc = document.querySelector('#item-description')
  let result = document.querySelector('#pstad-descrptn')
  result.value = 
    item_pre_desc.innerText.replace(/\n+/g,'\n') 
    + '\n'
    + item_desc.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 &amp; 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>

awesome thank you so much @apple apple Is there a way to make it so #item-pre-description doesn't have a line between them? as I want the pre-description to be a block of code with no spaces only line breaks. Then after the number of lenses: 2.. that's when there is a blank line. If that makes sense? — aussiedan, Nov 03 '20 at 11:35
Thank you so much. You are the best! Made my day :-) exactly what I've been struggling with for hours and hours lol — aussiedan, Nov 03 '20 at 12:10

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

1 Answers1