Манипуляции над каждым вторым символом в блоке?

Question

[rundll32]

У меня есть задача менять стиль каждого второго символа в блоке. CSS правило nth-child не будет работать для textContent, а других правил для этой цели (я так понимаю) нет. Если же модифицировать innerHtml, и оборачивать символы в span при каждом событии изменении текста, то не отразится ли это на скорости (при большом объеме текста) и т.д. (например, может сбиться выделение текста и т.д.)?

Comments

[Seanyr]

Ну при вводе текста с клавиатуры лучше перехватывать сразу после нажатия клавиши и добавлять уже обернутым в span.
Чтобы не было проблем с обновлением, можно сделать по-другому (правда мусора в html станет еще больше):
оборачиваем в span не через символ, а каждый символ. Дальше можно их с помощью :nth-child(2n) стилизовать. Идея в том чтобы не менять innerHTML, а добавлять потомков родительскому классу. Тогда все предыдущие останутся нетронутыми

[rundll32]

Seanyr, а в чем разница, это разве тоже не изменение innerHtml?

[Seanyr]

rundll32, не совсем. Изменение innerHtml родителя заменяет всё его содержимое, а добавление потомка не затрагивает то что в нём уже было

Пример

Здесь можно посмотреть как это работает. Выделение текста сбивается. Так же если открыть инспектор, видно что каждый раз обновляется всё содержимое родителя

Answer 1

[Seanyr]

Простенькая демонстрация того что я в комментариях написал

Comments

[Seanyr]

Либо так, со спанами через раз, выделение тоже не сбивается. Меньше html, но чуть сложнее логика

[rundll32]

Спасибо! А как быть с пробелом, backspace и прочими клавишами? Да, кстати, с удалением тут еще не очень понятно.

[Seanyr]

rundll32, пробел работает, а на остальные надо отдельно писать обработки когда поймали нажатие. Собственно, вопрос был о том как стилизовать текст, а не писать сам блок)