使用 jquery/javascript：如何在无法编辑 html 的情况下删除空格并保留分隔符

Question

我尝试了很多方法来解决我的问题。在我下面的代码中，这是我可以获得的壁橱，即使如此，这也不是我想要的。试图实现：我正在从 div 复制 html 并将其放置在文本区域内。我去掉了 html 但保留换行符。然而，由于 html 是从第三方网站使用的，我无法控制 'html' 的结构方式。正如代码中看到的额外空格一样。以下代码在文本区域中应该美观整洁，如下所示：文本区域数据的格式应如下所示：产品详情：商品编号： 000800209270品牌: 尼康型号：D3500颜色: 黑色镜头数量：2这款尼康 D3500 相机机身配有尼康 18-55mm 1:3.5-5.6G VR 镜头尼康 70-300mm 1:4.5-6.3G ED VR 镜头 1 个电池和充电器。快门数：426相机和两个镜头都处于完美的工作状态，几乎没有任何明显的磨损（请参见照片）。有关此项目或您可能见过的任何其他项目的更多信息，请随时向我发送电子邮件，我会尽快回复。    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 );    };我已经束手无策了，我已经尝试了很多“空白”删除技术，javascript和css都没有成功。请有人把我从痛苦中拯救出来。太感谢了！

Answer 1

你可以简单地使用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>

我希望预先描述是一个没有空格只有换行符的代码块。

然后，您需要分隔段落并将它们组合起来（并消除以第一段结尾的双行）

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>