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

FredIkO 22.12.2014 20:54

Каждой цифре свой стиль?
 
Добрый вечер дорогие форумчане, подскажите пожалуйста каким образом можно организовать стили для каждой цифры в определенном 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>


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

krutoy 22.12.2014 21:19

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

FredIkO 22.12.2014 22:03

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

почему у меня спан не в 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>');
    });
});

krutoy 22.12.2014 22:16

Цитата:

Сообщение от 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>

FredIkO 22.12.2014 22:18

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

рони 22.12.2014 22:52

Цитата:

Сообщение от FredIkO
почему у меня спан не в html а как текст

:-?
Цитата:

Сообщение от FredIkO
$(".proverka").text(function(index


FredIkO 23.12.2014 00:26

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

ruslan_mart 23.12.2014 07:38

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

рони 23.12.2014 08:00

Ruslan_xDD,
а g?

FredIkO 19.01.2015 15:19

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

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>


Часовой пояс GMT +3, время: 18:41.