复制相邻时如何防止部分HTML文本被复制？

Question

我写了一个JavaScript widget，它添加了行号，而我无法弄清楚的一件事是在复制文本时防止数字被复制。我希望人们能够复制数字周围的序列，但不能复制数字。 Here is an example of the script's results.

基本上：

<span>useful stuff to be copied </span>
<span style="some-mysterious-setting: True;"> gloss to be discarded in selection </span>
<span> useful stuff to be copied</span>

数字被实现为单独的跨度元素，而不是表格或任何花哨的东西。我在 CSS 中尝试了user-select: none; 及其变体，但这意味着它不会被突出显示，但它仍然会复制编号。

Answer 1

我想这应该可行：

Javascript：

var elem = document.getElementsByClassName("myElement");
elem.unselectable = "on";

HTML：

<span>useful stuff to be copied </span>
<span class="myElement"> gloss to be discarded in selection </span>
<span> useful stuff to be copied</span>

Answer 2

你也可以使用 CSS counter 来得到你想要的结果，如果你有大量的数据你不再需要指定行号。

CSS

table
{
    counter-reset: line;
    counter-increment: line;
}

td:nth-of-type(1)::before {
  counter-increment: line+10;
  content: counter(line) " ";
}

td:nth-of-type(1)
{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML

<table>
  <tr>
    <td></td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td></td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td></td>
    <td>Row 3</td>
  </tr>
  <tr>
    <td></td>
    <td>Row 4</td>
  </tr>
</table>

Answer 3

所以你不需要 Javascript。

解决方案是使用伪元素，而不是实际将数字放入元素中。

<span class="line-number" data-line-number="1"></span>

CSS：

.line-number::before {
  content: attr(data-line-number);
}

td:nth-of-type(1) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
td:nth-of-type(1)::before {
  content: attr(data-line-number);
}

<table>
  <tr>
    <td data-line-number="1"></td>
    <td>Test row</td>
  </tr>
  <tr>
    <td data-line-number="2"></td>
    <td>Test row</td>
  </tr>
  <tr>
    <td data-line-number="3"></td>
    <td>Test row</td>
  </tr>
  <tr>
    <td data-line-number="4"></td>
    <td>Test row</td>
  </tr>
</table>