How to copy to clipboard values of multiple <span> elements simultaneously with Javascript

Question

To copy the value of a span element whose ID is equal to "name", after clicking a button, I am doing so, for example:

        function copiar() {                        
        const element = document.getElementById('nome');
        var range = document.createRange();
        range.selectNodeContents(element);
        window.getSelection().addRange(range);
        document.execCommand("copy");               
        }

However, I have another span whose ID is equal to "last name" and would like to copy simultaneously by clicking the button.

Answer 1

WARNING:

To date, 12/31/2019, in which this response was written this solution is only compatible with browsers based on Chromium, Firefox and Opera. The response is based on technology considered until recently and has not yet been fully implemented between browsers.

W3C | Clipboard API and Events

Can I Use | Clipboard API: writeText

Webkit API Improvements | Clipboard API Improvements

---

An alternative would be to use Transfer Area API to make a copy of the information.

Your documentation describes you:

To Clipboard API provides the ability to respond to clipboard commands (cut, copy and paste), plus asynchronously read and write to the system clipboard.

This API is designed to replace access to the transfer using document.execCommand().

This API adds the interface Navigator the reading property clipboard that returns the object Clipboard used to read and write content to the clipboard.

Remembering that:

Access to clipboard content is blocked behind the API of permissions ; without the user’s permission, it is not allowed to read or change content in clipboard.

To save a string to the clipboard use the method writeText()

function copiar() {

  let nome = document.getElementById('Nome').innerText;
  let sobrenome = document.getElementById('Sobrenome').innerText;

  navigator.clipboard.writeText(nome + " " + sobrenome)
    .then(
      function() {
        console.log(" Os dados foram copiados.")
      },
      function() {
        console.error("Houve um problema ao copiar os dados.")
      });
}

<div>
  <label>Nome:</label>
  <span id="Nome">Augusto</span>
</div>
<div>
  <label>Sobrenome:</label>
  <span id="Sobrenome">Vasques</span>
</div>
<br>
<input type="button" onclick="copiar()" value="Copiar">

Answer 2

This alternative:

function copiar() {
        window.getSelection().removeAllRanges(range);
        const element = document.querySelectorAll(".nomesobrenome");
        var range = document.createRange();
        range.setStartBefore(element[0]);
        range.setEndAfter(element[1]);
        const selection = window.getSelection();
        window.getSelection().addRange(range);
        document.execCommand("copy");
    }

     <div>
      <label>Nome:</label>
      <span id="Nome" class="nomesobrenome">Augusto</span>
    </div>
    <div>
      <label>Sobrenome:</label>
      <span id="Sobrenome" class="nomesobrenome">Vasques</span>
    </div>
    <br>
    <input type="button" onclick="copiar()" value="Copiar">

Answer 3

function copiarSPAN() {
    const span = document.querySelectorAll('span');
    const range = new Range();
    range.setStartBefore(span[1]);
    range.setEndAfter(span[2]);
    const selection = window.getSelection();
    selection.addRange(range);
    document.execCommand("copy");
}