jQuery skopiuj listę wielu wierszy do schowka

Question

Spędziłem trochę czasu, próbując znaleźć rozwiązanie, które skopiowałoby listę wielowierszową w HTML, usunęło tagi i wcięcia z przycisku onclick bez użycia Flasha. W moich badaniach natknąłem się na "jQuery click button copy to clipboard" i przetestowałem Alvaro Montoro's answer, ale rozwiązanie nie działa na liście wielowierszowej, ale działa doskonale dla tekstu akapitowego. Nie mam zamiaru obsługiwać interfejsu Clipbaord API, ponieważ pokazuje on bardzo różne przeglądarki w różnych wersjach: limited support. Prowadząc dalsze badania, natknąłem się na "HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?", a odpowiedź Thayne'a łączy się z blog post, ale skopiuje cały HTML. Mam zorientowali się, jak rozebrać tagi i tiret:

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

Jak mogę skopiować listę pozycji wielo-liniowy z jQuery, usunąć znaczniki, usunąć wcięcia i skopiować do schowka bez użycia Flasha? Czy istnieje wtyczka obsługująca wszystkie najnowsze przeglądarki, których nie widzę?

Answer 1

Uwaga: to rozwiązanie będzie działać w IE10 +, Chrome 43+, Opera 29+ i Firefox 41+. Nie dla Safari!

Jesteś większość drogi tam, po prostu trzeba select()<textarea> następnie użyć document.execCommand('copy') załadować go do schowka.

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>

The <textarea> jest wymagane dla tej pracy, ale można go ukryć w CSS. To nie będzie tak proste, jak display:none, ponieważ to dyskwalifikuje go z możliwości wyboru. Możesz ustawić go poza ekranem lub postępować zgodnie ze szczegółową radą w this answer, aby uczynić ją niewidoczną.

Dodatkowe odstępy pochodzą z wcięcia HTML, można go pozbyć się za pomocą String.prototype.trim(), ale najlepiej byłoby zamiast tego zbudować twoją listę, przechodząc przez DOM zamiast Regex.