Как покрасить текст до br?

Question

[cracker-test]

Есть html, который содержит в себе кусочек тексте br и вторую часть текста. Как мне добавить класс тексту, что находится после br
<p>text <br> text </p>

Answer 1

[Rsa97]

Выделить этот текст в отдельный span с нужными стилями.

Comments

[cracker-test]

Сделать нужно через js. Не просто так я же метку поставил

[Rsa97]

cracker-test, Ну так сделайте через JS. Получаете innerHTML, делите текст по br, обрамляете нужную часть в span, соединяете всё обратно и записываете в innerHTML.

[cracker-test]

Rsa97, как разделить текст по br?

[Сергей delphinpro]

cracker-test, https://yandex.ru/search/?text=как+разделить+строк...

Answer 2

[Ярослав Иванов]

<style>
  .wrap-text {
    color: green
  }
</style>

<p>text01 <br> text02</p>

<script>
  const p = document.querySelector('p');
  const text02 = p.childNodes[2];
  const span = document.createElement('span');

  span.classList.add('wrap-text');

  text02.after(span);
  span.appendChild(text02)
</script>

Comments

[Сергей delphinpro]

нет обработки случая, когда в строке отсутствует тег BR (количество childNodes будет другим. А вы гвоздями прибили цифру 2)

[Ярослав Иванов]

Сергей delphinpro, Вопрос - ответ ) Я дал зерно, дальше сам))

[Сергей delphinpro]

Ярослав Иванов, ну тоже верно )

[Ярослав Иванов]

cracker-test а как насчёт отметить ответ?

Answer 3

[Сергей Соколов]

Можно посмотреть childNodes этого параграфа. Их будет три: текст, элемент, текст.
Заменить последний на его клон в обёртке:

Comments

[Сергей delphinpro]

а если их будет два? )

[Сергей Соколов]

Сергей delphinpro,

содержит в себе кусочек тексте br и вторую часть текста