时间戳

首页 > 解决方案 > 使用 jquery/javascript：如何在无法编辑 html 的情况下删除空格并保持中断

javascript - 使用 jquery/javascript：如何在无法编辑 html 的情况下删除空格并保持中断

问题描述

我试图实施这个网站的解决方案，但没有奏效，我尝试了很多方法来解决我的问题。在我下面的代码中，我可以得到他的壁橱，即使那样，这也不是我想要的。

试图达到：

然而，由于第三方网站使用的 html，我无法控制“html”的结构方式。正如代码中看到的额外空格一样。以下代码在 textarea 中应该很好看，看起来像：

Textarea 数据的格式应如下所示：

产品详情：

货号：000800209270

品牌：尼康

型号：D3500

颜色：黑色

镜片数量：2

这款 Nikon D3500 相机机身随附 Nikon 18-55mm 1:3.5-5.6G VR Lens Nikon 70-300mm 1:4.5-6.3G ED VR Lens 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 );

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

我束手无策，我尝试了很多“空白”删除技术，javascript 和 css 都没有占上风。请有人把我从痛苦中拯救出来。太感谢了！

标签： javascriptjquery

解决方案

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

推荐阅读