jQuery copy multi-line list to clipboard

Question

I've spent some time trying to figure out a solution that would copy a multi-line list in HTML, remove tags and indentions all from a button onclick without using Flash. In my research I have run across "jQuery click button copy to clipboard" and I have tested Alvaro Montoro's answer but the solution doesn't work on a multi-line list but it works great for paragraph text. I do not intend to support Clipbaord API because it shows very limited support across browsers. Researching further I ran across "HTML5 alternative to flash-based ZeroClipboard for safe copying of data to clipboard?" and Thayne's answer links to a blog post but it will copy all the HTML. I have figured out how to strip the tags and 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);
});

How can I copy a multi-line list item with jQuery, remove tags, remove indentions, and copy to a clipboard without using Flash? Is there a plugin that supports all the latest browsers I am not seeing?

Answer 1

Note: this solution will work in IE10+, Chrome 43+, Opera 29+, and Firefox 41+. Not for Safari!

You're most of the way there, you just need to select() the <textarea> then use document.execCommand('copy') to load it into the 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>

The <textarea> is required for this to work, but you can hide it with CSS. It won't be as simple as display:none since that disqualifies it from being select-able. You could position it off screen, or follow the detailed advice in this answer to make it invisible.

The extra spacing comes from your HTML indentation, you could get rid of it with String.prototype.trim() but ideally I would instead build your list by traversing the DOM instead of using Regex.