Как вставить текст после родителя определённого кол-ва символов?

Question

[Лоло]

Уже долго не могу разобраться.. У меня есть блок, в котором есть текст (множество абзацев, где каждый в своём теге). Как мне вставить после родителя 20 символа текст (и можно ли реализовать сие без углубления в range)?

Например:

<p id="art1">Привет приятель</p><p id="art2">Пока мой друг</p>

здесь, 20-ым символом является К (поКа), и как мне на основе этого сделать так, чтобы я получил родителя, а значит

с id равным art2 ?

Answer 1

[0xD34F]

О каких элементах идёт речь, какое количество символов у них внутри должно оказаться, и какой текст надо вставить:

const elements = document.querySelectorAll('p');
const max = 20;
const text = 'hello, world!!';

Перебираем элементы, суммируем длины их содержимого, по достижении заданного значения вставляем текст:

let len = 0;

for (const n of elements) {
  len += n.innerText.length;
  if (len >= max) {
    n.parentNode.insertBefore(new Text(text), n.nextSibling);
    // или
    n.outerHTML += text;

    break;
  }
}

или

const el = Array.prototype.find.call(elements, function(n) {
  return (this[0] += n.textContent.length) >= max;
}, [ 0 ]);

el?.after(text);
// или
el && el.insertAdjacentText('afterend', text);

Comments

[Лоло]