Question

我要实现的目标

我编写了一个简单的复制到剪贴板函数，当您单击表行时，它将获取单元格2、3和4的内容并复制到剪贴板。但是还要在内容之间添加一个破折号。

示例

Raw data: 123456789
Copied data: 123-456-789

我的问题

我似乎无法在两者之间添加破折号。我得到了.find，但是不能在每个td选择器之间添加破折号。是否可以仅添加原始文本？还是我需要将.find分开并在两者之间加一个破折号，或者将.text分成三部分？最优雅的解决方案是将-添加到唯一的.find内？

我到剪贴板的工作副本是什么样的

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).find('td:eq(2), td:eq(3), td:eq(4)').text()).select();
  document.execCommand("copy");
  $temp.remove();
}

Output: 123456789

我想实现的目标：

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).find('td:eq(2), "-" td:eq(3), "-" td:eq(4)').text()).select();
  document.execCommand("copy");
  $temp.remove();
}

Desired output: 123-456-789

我最近得到的是这个

.find("td:eq(2), td:eq(3), td:eq(4)").append("-").text()).select();

但这在末尾加了一个破折号，并且ALSO操纵了DOM，这不是我想要的。因此，无法使用.append。

Output: 123-456-789-

Answer 1

为解决此问题，我决定使用jQuery.map和Spread syntax将所有innerText值添加到数组中。然后.join使用-作为分隔符的数组。

const res = [...$("td:eq(2), td:eq(3), td:eq(4)").map((i, e) => e.innerText)].join("-");

完整解决方案：

$(function() {
    $("#copy-to-clipboard").on("click", copyToClipboard);

    function copyToClipboard() {
        var $temp = $("<input>");
        $("body").append($temp);
        const res = [...$("td:eq(2), td:eq(3), td:eq(4)").map((i, e) => e.innerText)].join("-");
        $temp.val(res).trigger("select");
        document.execCommand("copy");
        $temp.remove();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="copy-to-clipboard">Copy To Clipboard</button>

<table>
    <tr>
        <td>654</td>
        <td>321</td>
        <td>123</td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
</table>

<input type="text" placeholder="Paste here to test">

在每个td选择器之间添加破折号

1 个答案: