javascript - 在jquery中复制由换行符分隔的多个li文本

Question

我在 li 中有数据，如图所示，当我单击复制时，它应该复制到剪贴板，如下所示

a[tab]b
c[tab]d
e[tab]f

JavaScript 代码在这里

function copy(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).parent().text()).select();
    document.execCommand("copy");
    $temp.remove();
    $(element).parent().effect("highlight", {}, 1000);
}

<ul>
    <li>a<br/>b</li>
    <li>c<br/>c</li>
    <li>e<br/>f</li>
</ul>

Answer 1

尝试下面的代码片段，

function copy(element) {
    // use textarea instead of input because newline character is skipped from it
    var $temp = $("<textarea/>");
    $("body").append($temp);
    // making a clone to prevent affecting original ul
    var clone = $(element).parent().clone();
    // now replacing br with tab
    $(clone).find('br').replaceWith("\t");
    $temp.val(
      // get all li text using map
      clone.map(function(){  
        return $(this).text()
      }).get().join("\n") // get and join by new line
      ).select();
    document.execCommand("copy");
    $temp.remove();
}

$('button').on('click',function(){
    copy($('ul').find('li'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>a<br/>b</li>
    <li>c<br/>c</li>
    <li>e<br/>f</li>
</ul>

<button>Copy</button>