使用 jquery/javascript：如何在无法编辑 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!

Answer 1

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>