1

Este post explica como copiar texto simples para a área de transferência usando o ZeroClipboard.

Porém um leitor trouxe uma dúvida: como pegar o conteúdo de uma <div> com várias divs filhas dentro dela? Quando usamos o exemplo acima estritamente falando, um monte de espaço é transmitido (os tabs do código fonte).

Como solucionar esse problema?

1 Resposta 1

2

Não tenho como testar o ZeroClipboard pois não possuo Flash no meu computador, mas vou arriscar uma resposta visto que a dúvida é mais relacionada a captura de texto e manipulação do que a biblioteca em si.

Como essa biblioteca fornece uma API que te possibilita copiar o conteúdo posteriormente com a função setData(), primeiro obtenha o conteúdo do elemento (removendo os espaçamentos) e depois chame essa função com o "resultado limpo" do elemento.

(function(){
  
  // Retorna o conteúdo textual do elemento.
  function text(el){
    return el.innerText || el.textContent || '';
  }
  
  // Remove as quebras de linhas da string.
  function clean(str){
    return str.replace(/\r?\n/gm, ' ');
  }

  
  var elemento = document.getElementById('foo');
  
  var conteudo = text(elemento);
  alert('ANTES:\n\n' + conteudo);
  
  conteudo = clean(conteudo);
  alert('DEPOIS:\n\n' + conteudo);
  
  // copia 'conteudo' para o clipboard.

})();
<div id='foo'>
  Mussum Ipsum, cacilds vidis litro abertis.
  <div>
    Casamentiss faiz malandris se pirulitá.
    <div>
      Si num tem leite então bota uma pinga aí cumpadi!
      <p>
        Quem num gosti di mum que vai caçá sua turmis!
      </p>
    </div>
  </div>
</div>

2
  • OFF: Utilize o clipboardjs ao invés do Zero, caso não precise suportar navegadores antigos. Commented 29/06/2016 às 21:14
  • Obrigado pela resposta rápida. Não conhecia essas biblioteca, vou dar uma olhada nela depois. Commented 30/06/2016 às 16:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .