Javascript-форум - Каждой цифре свой стиль?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Каждой цифре свой стиль? (https://javascript.ru/forum/misc/52513-kazhdojj-cifre-svojj-stil.html)

Каждой цифре свой стиль?

Добрый вечер дорогие форумчане, подскажите пожалуйста каким образом можно организовать стили для каждой цифры в определенном div'е

То есть имеется сплошной текст в котором встречаются (года)

Пример:

Дед по отцу Лев Александрович — артиллерии полковник, гвардии капитан. Отец — Сергей Львович Пушкин (<div class="data">1767</div>—<div class="data">1848</div>), светский острослов и поэт-любитель. Мать Пушкина — Надежда Осиповна (<div class="data">1775</div>—<div class="data">1836</div>), внучка Ганнибала.

Хочу сделать чтобы у даты у каждого символа были стили

Как бы реализовать что бы например все что в div'e data каждый символ автоматически заносился в <span>
Например:

<div class="data"><span>1</span><span>7</span><span>6</span><span>7</span></div>

Спасибо за уделенное время!

Смотря какие стили, где их будете брать для каждого свой? Вручную классы создавать? Тогда уж проще вбить вручную инлайн. Если только цвета, то можно так

<html>
  <head>
  </head>

  <body>
<div>
Дед по отцу Лев Александрович — артиллерии полковник, гвардии капитан. Отец — Сергей Львович Пушкин (<div class="data">1767</div>—<div class="data">1848</div>), светский острослов и поэт-любитель. Мать Пушкина — Надежда Осиповна (<div class="data">1775</div>—<div class="data">1836</div>), внучка Ганнибала.
</div>
<script>
d=document.querySelector("div")
gen=function(){
  var gen=function(){return Math.floor(Math.random()*9)}
  return "#"+gen()+gen()+gen()+gen()+gen()+gen()
}
d.innerHTML=d.innerHTML.replace(/\d/g, function(year){return "<span style='font-size: "+gen().slice(-2)+"; color: "+gen()+"'>"+year+"</span>"})


</script>
</body>
</html>

Решил пойти другим путем
что я делаю не так?

почему у меня спан не в html а как текст отображатеся

<div class="proverka">
1234.
</div>

$(document).ready(function(){
    $(".proverka").text(function(index, html) {
        return html.replace('1', '<span>1</span>').replace('2', '<span>2</span>');
    });
});

Цитата:

Сообщение от FredIkO

почему у меня спан не в html а как текст отображатеся

Хз, я жеквери не знаю. Думаю, ты хотел вот это

<html>
  <head>
  </head>

  <body>

<div class="proverka">
1234.
</div>

<script>
d=document.querySelector(".proverka")
text=d.innerHTML
text=text.replace("1", "<span>1</span>")
text=text.replace("2", "<span>2</span>")
d.innerHTML=text
</script>
</body>
</html>

krutoy,
спасибо тебе добрый человек)))

Цитата:

Сообщение от FredIkO

почему у меня спан не в html а как текст

:-?

Цитата:

Сообщение от FredIkO

$(".proverka").text(function(index

рони,
спасибо увидел

$(function(){
    $(".proverka").html(function(index, html) {
        return html.replace(/\d/g, '<span>$1</span>');
    });
});

Ruslan_xDD,
а g?

столкнулся с проблемой

d=document.querySelector(".stata-sr")
text=d.innerHTML
text=text.replace("1", "<span>1</span>")
text=text.replace("2", "<span>2</span>")
text=text.replace("3", "<span>3</span>")
text=text.replace("4", "<span>4</span>")
text=text.replace("5", "<span>5</span>")
text=text.replace("6", "<span>6</span>")
text=text.replace("7", "<span>7</span>")
text=text.replace("8", "<span>8</span>")
text=text.replace("9", "<span>9</span>")
text=text.replace("0", "<span>0</span>")
d.innerHTML=text

если цифра повторяется то js его не обрабатывает почему как исправить?

в html получается так

<div class="left stata-sr"><span>1</span><span>3</span>3</div>