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?

BTW, to remove tags you can use `.text()` instead of `.html()`. — starikovs, Sep 14 '15 at 14:47
@starikovs thanks, this was my first iteration of testing and I didn't want to post code that was convoluted — DᴀʀᴛʜVᴀᴅᴇʀ, Sep 14 '15 at 14:48
If you use Twitter there's something like "copy tweet link" which shows a modal with selected text and user can ctrl+c it. Why don't you do the same? — starikovs, Sep 14 '15 at 14:55
I didn't think of that approach.. I will spend some time reviewing that. — DᴀʀᴛʜVᴀᴅᴇʀ, Sep 14 '15 at 14:56

score 2 · Accepted Answer · edited May 23 '17 at 12:33

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.

This works great, got a question, got a list with tag need only the text and remove the a tag because is bringing it too. Thanks — Rodrigo Zuluaga, Aug 03 '16 at 20:35
@RodrigoZuluaga either modify the Regex to strip the markup or use JavaScript to pull out the `innerHTML` — JohnB, Aug 04 '16 at 13:15

jQuery copy multi-line list to clipboard

1 Answers1