jQuery copia elenco a più righe negli appunti

Question

Ho passato un po 'di tempo a cercare una soluzione che copi un elenco a più righe in HTML, rimuovi tag e indentazioni tutto da un pulsante onclick senza utilizzare Flash. Nella mia ricerca ho incontrato "jQuery click button copy to clipboard" e ho testato Alvaro Montoro's answer ma la soluzione non funziona su un elenco a più righe ma funziona perfettamente per il testo di paragrafo. Non intendo supportare l'API Clipbaord perché mostra molto limited support attraverso i browser. Facendo ulteriori ricerche, ho trovato "HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?" e la risposta di Thayne collega a uno blog post ma copierà tutto l'HTML. Ho capito come mettere a nudo i tag e trattini:

HTML:

<button onclick="copyToClipboard('#therecipe')">Copy List</button> 
<div class="listing"> 
    <ul id="someList"> 
     <li>1 million</li> 
     <li>Monday</li> 
     <li>Something</li> 
     <li>Foobar</li> 
     <li>1tsp blah</li> 
    </ul> 
</div> 

<textarea class="auto"></textarea> 

jQuery:

$('button').click(function(element) { 
    var thelist = $('#someList').html(); 
    thelist = thelist.replace(/\s+<li>/g, ''); 
    thelist = thelist.replace(/<\/?li>/g, '\r'); 
    $('.auto').val(thelist); 
}); 

Come posso copiare un elemento della lista multilinea con jQuery, rimuovere i tag, rimuovere i rientri e copiare negli Appunti senza utilizzare Flash? C'è un plugin che supporta tutti i browser più recenti che non vedo?

Answer 1

Nota: questa soluzione funzionerà con IE10 +, Chrome 43+, Opera 29+ e Firefox 41+. Non per Safari!

Sei la maggior parte del tragitto, non vi resta che select() il <textarea> quindi utilizzare document.execCommand('copy') per caricarlo nella clipboard.

var copyTextarea = document.querySelector('.auto'); 
 

 
$('button').click(function(element) { 
 
    var thelist = $('#someList').html(); 
 
    thelist = thelist.replace(/\s+<li>/g, ''); 
 
    thelist = thelist.replace(/<\/?li>/g, '\r'); 
 
    $('.auto').val(thelist); 
 
    copyTextarea.select(); 
 
    document.execCommand('copy'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Copy List</button> 
 
<div class="listing"> 
 
    <ul id="someList"> 
 
    <li>1 million</li> 
 
    <li>Monday</li> 
 
    <li>Something</li> 
 
    <li>Foobar</li> 
 
    <li>1tsp blah</li> 
 
    </ul> 
 
</div> 
 
<textarea class="auto"></textarea>

Il <textarea> è necessario per far funzionare tutto questo, ma si può nasconderlo con i CSS. Non sarà così semplice come display:none dal momento che lo squalifica dall'essere selezionabile. È possibile posizionarlo fuori dallo schermo o seguire i consigli dettagliati in this answer per renderlo invisibile.

La spaziatura extra deriva dal rientro HTML, è possibile liberarsene con String.prototype.trim() ma idealmente preferirei invece creare l'elenco spostando il DOM invece di utilizzare Regex.