jQuery 将多行列表复制到剪贴板

我花了一些时间试图找出一种解决方案，可以在 HTML 中复制多行列表，从按钮 onclick 中删除标签和缩进，而无需使用 Flash。在我的研究中，我遇到了“jQuery click button copy to clipboard”，并且我测试了Alvaro Montoro's answer但该解决方案不适用于多行列表，但它适用于段落文本。我不打算支持Clipbaord API，因为它显示得很limited support跨浏览器。进一步研究，我遇到了“HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?”，塞恩的答案链接到blog post但它会复制所有 HTML。我已经弄清楚如何去除标签和缩进:

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

如何在不使用 Flash 的情况下使用 jQuery 复制多行列表项、删除标签、删除缩进以及复制到剪贴板？是否有一个插件支持我没有看到的所有最新浏览器？

请您参考如下方法:

注意:此解决方案适用于 IE10+、Chrome 43+、Opera 29+ 和 Firefox 41+。 不适用于 Safari!

您已经完成了大部分工作，您只需要 select() <textarea>然后使用document.execCommand('copy')将其加载到剪贴板中。

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>

<textarea>这是必需的，但您可以使用 CSS 隐藏它。不会像display:none那么简单因为这使它失去了可选择的资格。您可以将其放置在屏幕之外，或遵循this answer中的详细建议。使其不可见。

额外的间距来自您的 HTML 缩进，您可以使用 String.prototype.trim() 删除它。但理想情况下，我会通过遍历 DOM 而不是使用正则表达式来构建列表。