文章/答案/技术大牛

发布

社区首页 >问答首页 >如何复制div中的所有文本内容

问如何复制div中的所有文本内容
EN

Stack Overflow用户

提问于 2022-07-05 08:37:26

回答 2查看 61关注 0票数 0

我有一个给定格式的html：

<div class="export-details" id="export-area">
  <div class="row m-0">
    <div class="col-lg-6">
      <h1 class="titleStyling py-2">Analytics testing-2</h1>
    </div>
    <div class="col-lg-6 text-right">
      <i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
      <i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
      <ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
      </ion-icon>
      <ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
      </ion-icon>
    </div>
  </div>
  <!---->
  <div class="sectionSpacing">
    <!---->
  </div>
  <div class="sectionSpacing">
    <!---->
  </div>
  <div class="sectionSpacing">
    <!---->
    <div>
      <div class="sectionTitle d-flex justify-content-between align-items-center">
        <label class="formLabelStyles sectionheading">Recommendations</label>
      </div>
      <!---->
      <div>
        <div class="contentAlignment">
          <span>
            <p>testing purpose</p>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="sectionSpacing">
    <!---->
  </div>
  <div class="sectionSpacing">
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">Meta Information</label>
    </div>
    <div class="row rowSpacing">
      <!---->
      <div class="col-md-6 section-heading metaDataStyle">
        <div class="col-md-3">
          <label>Publisher: &nbsp;</label>
        </div>
        <div class="displayFlex">
          <!---->
          <div class="child">
            <span>ProtocolNow</span><span class="comma">,&nbsp;</span>
          </div>
          <div class="child">
            <span>Other Medical Society</span><span class="comma">,&nbsp;</span>
          </div>
          <div class="child">
            <span>Valley Perinatal</span><span class="comma">,&nbsp;</span>
          </div>
        </div>
      </div>
      <!---->
      <div class="col-md-6 section-heading metaDataStyle">
        <div class="col-md-3">
          <label style="width: 111%;">Medical Field: &nbsp;</label>
        </div>
        <div class="displayFlex">
          <!---->
          <div class="child">
            <span>Coronavirus - Covid 19</span><span class="comma">,&nbsp;</span>
          </div>
          <div class="child">
            <span>Billing</span><span class="comma">,&nbsp;</span>
          </div>
        </div>
      </div>
      <!---->
      <!---->
      <!---->
      <div class="col-md-6 section-heading metaDataStyle">
        <div class="col-md-3">
          <label><strong>Author: &nbsp;</strong></label>
        </div>
        <div class="displayFlex">
          <div class="child">
            <span>Neha KA</span><span class="comma">,&nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想将所有显示的文本复制到剪贴板中：

<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>

我通过这个js函数实现了这个功能：

var div = document.querySelectorAll(".export-details")[0].textContent;

function copyDivToClipboard() {
  const el = document.createElement("textarea");
  el.value = div;
  document.body.appendChild(el);
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
}

然而，它在文本之间增加了太多的空格。

当我从textContent改为innerText时，它工作得很好。

但是根据这个回答，...innerText is much more performance-heavy: it requires layout information to return the result.

因此，如何使用innerText将文本完全复制到剪贴板上。

科德芬

javascript

回答 2

Stack Overflow用户

发布于 2022-07-05 08:43:54

尝试使用document.createRange

function copyDivToClipboard() {
  var range = document.createRange();
  range.selectNode(document.getElementById("export-area"));
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand("copy");
  window.getSelection().removeAllRanges();
}

<div class="export-details" id="export-area">
  <div class="row m-0">
    <div class="col-lg-6">
      <h1 class="titleStyling py-2">Analytics testing-2</h1>
    </div>
    <div class="col-lg-6 text-right">
      <i class="fas fa-copy margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #000000;" title="Copy to Clipboard"></i>
      <i class="fas fa-file-pdf margin-left10 margin-right-10 cursorPointer" name="download" style="font-size: 27px !important;color: #df1010;" title="Export to Pdf"></i>
      <ion-icon class="star-icon pr-2 starIcon cursorPointer icon icon-md ion-md-star" role="img" aria-label="star" title="Set Favorite">
      </ion-icon>
      <ion-icon class="star-icon shareIcon margin-left10 margin-right-10 cursorPointer icon icon-md ion-md-share" name="share" role="img" aria-label="share" title="Share Protocol">
      </ion-icon>
    </div>
  </div>
  <!---->
  <div class="sectionSpacing">
    <!---->
  </div>
  <div class="sectionSpacing">
    <!---->
  </div>
  <div class="sectionSpacing">
    <!---->
    <div>
      <div class="sectionTitle d-flex justify-content-between align-items-center">
        <label class="formLabelStyles sectionheading">Recommendations</label>
      </div>
      <!---->
      <div>
        <div class="contentAlignment">
          <span>
            <p>testing purpose</p>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="sectionSpacing">
    <!---->
  </div>
  <div class="sectionSpacing">
    <div class="sectionTitle d-flex justify-content-between align-items-center">
      <label class="formLabelStyles sectionheading">Meta Information</label>
    </div>
    <div class="row rowSpacing">
      <!---->
      <div class="col-md-6 section-heading metaDataStyle">
        <div class="col-md-3">
          <label>Publisher: &nbsp;</label>
        </div>
        <div class="displayFlex">
          <!---->
          <div class="child">
            <span>ProtocolNow</span><span class="comma">,&nbsp;</span>
          </div>
          <div class="child">
            <span>Other Medical Society</span><span class="comma">,&nbsp;</span>
          </div>
          <div class="child">
            <span>Valley Perinatal</span><span class="comma">,&nbsp;</span>
          </div>
        </div>
      </div>
      <!---->
      <div class="col-md-6 section-heading metaDataStyle">
        <div class="col-md-3">
          <label style="width: 111%;">Medical Field: &nbsp;</label>
        </div>
        <div class="displayFlex">
          <!---->
          <div class="child">
            <span>Coronavirus - Covid 19</span><span class="comma">,&nbsp;</span>
          </div>
          <div class="child">
            <span>Billing</span><span class="comma">,&nbsp;</span>
          </div>
        </div>
      </div>
      <!---->
      <!---->
      <!---->
      <div class="col-md-6 section-heading metaDataStyle">
        <div class="col-md-3">
          <label><strong>Author: &nbsp;</strong></label>
        </div>
        <div class="displayFlex">
          <div class="child">
            <span>Neha KA</span><span class="comma">,&nbsp;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="a" onclick="copyDivToClipboard()"> Click to copy all of this content </div>

票数 0

Stack Overflow用户

发布于 2022-07-05 08:48:52

当我想要将某件东西复制到控件+C时，我会这样做。

        const value = document.querySelector('#id').innerText
        navigator.clipboard.writeText(value)
        alert(`Copied value ${value}`)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72866382

复制

相似问题

问如何复制div中的所有文本内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何复制div中的所有文本内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何复制div中的所有文本内容
EN