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

Question

[Лоло]

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

Например:

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

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

с id равным art2 ?

Answer 1

[0xD34F]

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

const text = 'hello, world!!';
const max = 20;
let len = 0;

for (const p of document.querySelectorAll('p')) {
  len += p.textContent.length;
  if (len >= max) {
    p.insertAdjacentText('afterend', text);
    break;
  }
}

Comments

[Лоло]