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

Question

我编写了一个JavaScript 小部件，它添加行号，但我不明白的一件事是在复制文本时防止复制数字。我希望人们能够复制数字周围的序列，但不能复制数字。 以下是脚本结果的示例。

基本上：

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

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

Answer 1

所以你不需要Javascript。

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

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

CSS：

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

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

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