0

I have a html in a given format:

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

I want to copy all the displayed text into clipboard:

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

I have made this worked by this js function:

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

However, it adds too many spaces between the text.

When I changed from textContent to innerText, it is working fine.

But according to this answer, ...innerText is much more performance-heavy: it requires layout information to return the result.

So, how can the text be copied to clipboard exactly similarly by using innerText.

Codepen

Rasik
  • 1,961
  • 3
  • 35
  • 72
  • You could certainly strip out all the unwanted whitespace with some regexes, but then I'm not so sure you'd be saving the performance you'd save over just using `innerText`. Is there any particular reason you don't want to use `innerText` other than just the slightly longer execution time? Are you actually seeing poor performance using it or is this just theoretical? `innerText` exists as an option for a reason. There's nothing inherently wrong with using it here. – Liftoff Jul 05 '22 at 08:43
  • I have not seen the poor performance yet, but the html would be quite long with a lot of tables and images. – Rasik Jul 05 '22 at 08:51
  • 1
    I would honestly just give it a go and see if the execution time is good enough. No matter your solution, if the content is *really* long, it *will* take a long time to select and copy it. Jay's answer seems viable as well, but it might just come with the territory. – Liftoff Jul 05 '22 at 08:57
  • You may need to get all the text nodes in the `export-details` div, and then extract the text from them. You may refer to the following page: https://stackoverflow.com/questions/10730309/find-all-text-nodes-in-html-page – The KNVB Jul 05 '22 at 09:11

2 Answers2

0

Try with 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>
Jay
  • 2,826
  • 2
  • 13
  • 28
  • unfortunately this is not working in my actual code, though it is working in the codepen. – Rasik Jul 05 '22 at 09:21
0

when I want to copy something to the control + C I do this.

        const value = document.querySelector('#id').innerText
        navigator.clipboard.writeText(value)
        alert(`Copied value ${value}`)
Nick Vu
  • 14,512
  • 4
  • 21
  • 31
Poker Player
  • 146
  • 1
  • 4