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

我写了一篇增加行号的文章，但有一件事我搞不清楚，那就是在复制文本时防止数字被复制。我希望人们能够复制数字周围的序列，但不能复制数字。

基本上：

要复制的有用内容
选择时要丢弃的光泽
要复制的有用的东西

---

这些数字是作为一个单独的跨度元素来实现的，而不是作为一个表或任何类似的东西来实现的。我尝试了

用户选择：无及其变体，但这意味着它不会突出显示，但它会复制编号。
我想这应该可以：

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>

要复制的有用内容
选择时要丢弃的光泽
要复制的有用的东西
因此，您不需要使用Javascript

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

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


td:n类型（1）{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
td:N类型（1）：：之前{
内容：attr（数据行号）；
}

测试行
测试行
测试行
测试行
您也可以使用CSS
计数器
来获得所需的结果，如果您有大量数据，则不再需要指定行号

CSS

HTML


一排
第2排
第3排
第4排
您是按照示例中的方式还是按照典型编辑器的方式输出它？就像每一行都有一个数字？哦，其实这是你的代码。我在GitHub文件上做了一些更改。谢谢大家！问题是，如果你有文本在前面，在文本的末尾，你复制了它，你的剪贴簿中仍然会有中间的，不可选择的部分。是的，我检查过了。不幸的是，它不适用于拆分文本，但适用于整个文本！我还建议使用一个表，如我的代码片段示例中所示。没有必要，但从原理图和性能角度来看是有意义的。我喜欢只使用CSS的解决方案，所以这一个会得到我的喜欢！不知道您可以使用CSS访问数据属性。甚至可以使用
attr（）
获取其他非数据属性吗？在类名
class=“.line number”
@CagatayUlubay Yes
attr（X）
中还有一个点可用于任何属性，但它只返回字符串而不是整数/etc。我不想使用表，因为我没有将文本块限制在指定行中（事实上，我是在处理行号，但我将DNA/蛋白质序列拆分为块，添加数字）。此外，与表格相关的是，在使用连字号时，我确实遇到了单间距字体不是单间距字体的问题（&ndash；修复了它）。我会查看表格，因为它可以防止这两个问题。抱歉，在选择答案之前，我没有看到这个答案。但我肯定会查看计数器，因为它在这里可能很方便。谢谢。它对大多数用途都很好，但我不认为有办法将其设置为4位数，以便它从
0011
开始，而不是
11
@Alejalapeno开始用计数器是不行的，你的答案会更好。
.line-number::before {
  content: attr(data-line-number);
}

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;
}

<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>