在多个 <span> 项之间添加 "selectable" 逗号

Question

我正在尝试在项目列表之间添加一些逗号。

我知道您可以使用 :

.comma:not(:last-of-type)::after{
    content: ", ";
}

<span class="comma">A</span>
<span class="comma">B</span>
<span class="comma">C</span>

但是使用这种技术，逗号并不是真正写出来的（你不能 select 它们）。我需要能够 select 他们因为我然后复制剪贴板中的文本:)

关于如何执行此操作的任何想法（使用 css 或 js）？

Answer 1

您可以使用 document.querySelectorAll to select all but the last .comma span, and then add a comma to their innerText:

spans = document.querySelectorAll('.comma:not(:last-of-type)')

spans.forEach(span => span.innerText = span.innerText + ', ')

<span class="comma">A</span>
<span class="comma">B</span>
<span class="comma">C</span>

如果您想避免在“空”跨度之后放置逗号，您可以在添加逗号之前检查 innerText 的 length：

spans = document.querySelectorAll('.comma:not(:last-of-type)')

spans.forEach(span => span.innerText = span.innerText + (span.innerText.length ? ', ' : ''))

<span class="comma">A</span>
<span class="comma"></span>
<span class="comma">C</span>

如果 span 可能包含您想忽略的空格，只需 trim 首先是值：

spans = document.querySelectorAll('.comma:not(:last-of-type)')

spans.forEach(span => span.innerText = span.innerText.trim() + (span.innerText.trim().length ? ', ' : ''))

<span class="comma">A </span>
<span class="comma">   </span>
<span class="comma"> C</span>

在多个 <span> 项之间添加 "selectable" 逗号

Add "selectable" commas between multiple <span> items

html

javascript

css

add

comma