Получить .textContent, включая псевдоэлементы

Question

Учитывая

<div><span>first</span><span>second</span></div>

и

span + span::before {
  content: ', ';
}

Я хотел бы получить обработанную строку 'first, second' в JavaScript, но .textContent игнорирует содержимое псевдо- элемент, так как он не является частью DOM. Есть ли способ получить фактически обработанный текст?

Пример: https://jsfiddle.net/silverwind/nyr5kohj/2/

Answer 1

Получил работу, используя getComputedStyle. Он еще не поддерживает ::after, но добавить его не должно быть слишком сложно.

let text = '';
for (const child of children(document.querySelector('div'))) {
  if (child.nodeType === 1) {
    const before = window.getComputedStyle(child, '::before').getPropertyValue('content');
    if (before && before !== 'none') {
      text += before.replace(/^['"]/, '').replace(/['"]$/, '');
    }
  } else if (child.nodeType === 3) {
    text += child.textContent;
  }
}

alert(text);

function children(node) {
  const ret = [];
  for (let i = 0; i < node.childNodes.length; i++) {
    const child = node.childNodes[i];
    ret.push(child, ...children(child));
  }
  return ret;
}

Answer 2

Это не возвращает визуализированный текст, но имитирует поведение и создает ту же строку:

Шаг 1: Получить родительский div

Шаг 2: Отобразить дочерние элементы parent, чтобы получить текст в массиве

Шаг 3. Присоединить массив к строке

<div id="parent"><span>first</span><span>second</span></div>

const parent = document.getElementById("parent");
const childTextArray = [...parent.childNodes].map(child => child.innerText);
// => ["first", "second"]
const theStringYouAskedFor = childTextArray.join(", ");
// => "first, second"