jQuery sao chép danh sách nhiều dòng vào clipboard

Question

Tôi đã dành một chút thời gian để tìm ra giải pháp sao chép danh sách nhiều dòng trong HTML, xóa thẻ và thụt lề tất cả từ nút bấm mà không cần sử dụng Flash. Trong nghiên cứu của tôi, tôi đã chạy qua "jQuery click button copy to clipboard" và tôi đã thử nghiệm Alvaro Montoro's answer nhưng giải pháp không hoạt động trên danh sách nhiều dòng nhưng nó hoạt động tốt cho văn bản đoạn văn. Tôi không có ý định hỗ trợ API Clipbaord vì nó hiển thị rất limited support trên các trình duyệt. Nghiên cứu thêm tôi chạy qua "HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?" và câu trả lời của Thayne là blog post nhưng nó sẽ sao chép tất cả HTML. Tôi đã tìm ra cách để tước các thẻ và indents:

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

Làm thế nào tôi có thể sao chép danh mục đa phù hợp với jQuery, loại bỏ thẻ, loại bỏ thụt đầu dòng và sao chép vào khay nhớ tạm mà không cần sử dụng Flash? Có một plugin hỗ trợ tất cả các trình duyệt mới nhất mà tôi không nhìn thấy không?

Answer 1

Lưu ý: giải pháp này sẽ hoạt động trong IE10 +, Chrome 43+, Opera 29+ và Firefox 41+. Không dành cho Safari!

Bạn hầu hết ở đó, bạn chỉ cần select() số <textarea> sau đó sử dụng document.execCommand('copy') để tải nó vào khay nhớ tạm.

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>

Các <textarea> là cần thiết để làm việc này, nhưng bạn có thể ẩn nó bằng CSS. Nó sẽ không đơn giản như display:none vì điều đó không đủ điều kiện để có thể chọn. Bạn có thể định vị nó ra khỏi màn hình, hoặc làm theo lời khuyên chi tiết trong this answer để làm cho nó vô hình.

Khoảng cách thừa đến từ thụt đầu dòng HTML của bạn, bạn có thể loại bỏ nó bằng String.prototype.trim() nhưng lý tưởng tôi sẽ xây dựng danh sách của bạn bằng cách duyệt DOM thay vì sử dụng Regex.