Estoy tratando de agregar algunas comas entre una lista de elementos.
Sé que puedes hacer eso usando:
.comma:not(:last-of-type)::after{ content: ", "; } <span class="comma">A</span> <span class="comma">B</span> <span class="comma">C</span>Pero con esta técnica, las comas no se escriben realmente (no se pueden seleccionar). Necesito poder seleccionarlos porque luego copio el texto en el portapapeles :)
¿Alguna idea sobre cómo hacer esto (con css o js)?
Puede usar document.querySelectorAll para seleccionar todo menos el último tramo de .comma y luego agregar una coma a su 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> Si desea evitar colocar comas después de intervalos "vacíos", puede verificar la length del innerText antes de agregar una coma:
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> Y si los intervalos pueden contener espacios en blanco que desea ignorar, simplemente trim los valores primero:
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>