Обернуть кажду букву в span

JavaScript/jQuery

jQuery:

$(function() {
    $('#textblock').html(function(i, html) {
        var chars = $.trim(html).split("");
        return '<span>' + chars.join('</span><span>') + '</span>';
    });
});

JavaScript:

var el = document.getElementById('textblock');
spanize(el);

function spanize(el) {
    el.innerHTML = el.innerHTML.replace(/(.)/g, '<span>$1</span>');
}

Цвет для span на JavaScript:

var message = "The quick brown fox.";
var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
for (var i = 0; i < message.length; i++)
  document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");

Варианты на CSS

Вариант 1:

.username span {
  color: red;
}
.username span:nth-child(2n+1) {
  color: blue;
}
<span class="username"><span>U</span><span>s</span><span>e</span><span>r</span><span>n</span><span>a</span><span>m</span><span>e</span></span>

Вариант 2:

Это может быть достигнуто с помощью всего лишь CSS, хотя и с некоторыми оговорками:

  • Необходимо использовать моноширинный шрифт
  • Нужный текст должен быть передан через CSS

Общий принцип таков:

  • Выведите все слово в желаемом базовом цвете
  • Используйте абсолютно позиционированный псевдоэлемент для вывода альтернативного цвета, это делается путем указания нужных букв и использования пробелов для букв, которые должны оставаться базовым цветом

Это работает, потому что Буквы в моноширинном шрифте занимают одинаковое количество места (поэтому вы можете быть уверены, что буквы будут находиться в правильном положении). С помощью абсолютного позиционирования буквы могут быть уложены поверх набора слов в HTML.

.username {
  color: red;
  font-family: monospace;
  position: relative;
}
.username:after {
  color: blue;
  content: attr(data-descr);
  left: 0;
  position: absolute;
}
<div class="username" data-descr="u e n m">username</div>

Ещё

h$('.numbers').each(function (index) {
    var characters = $(this).text().split("");
    
    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
    $this.append("<span>" + el + "</span");
    });

});
<div class="numbers">12345</div>
<div class="numbers">12345</div>
<div class="numbers">12345</div>

Ещё

var d=$("div");
var text=d.text();
text=$.trim(text);
d.empty();

for(i=0;i<text.length;i++){
    var span=$("<span></span>");
    span.text(text[i]);
    d.append(span)
}

Ещё

$("div").each(function (index) {
  var characters = $(this).text().split("");
  characters = characters.filter(v => v != '');
  $(this).empty();
  for(var i =0; i < characters.length; i++) {
      $(this).append("<span>" + characters[i] + "</span");
  }    
});

С исключением пробелов пробелов

$("div").html(function(index, html) {
  return html.replace(/\S/g, '<span>$&</span>');
});

С удалением пробелов

(function() {
  var div, i, span = "";
  div = document.querySelectorAll("div")[0];
  for (i = 0; i < div.innerText.length; i++) {
    if (div.innerText[i] !== " ") {
      span += "<span>";
      span += div.innerText[i];
      span += "</span>";
    }
  }
  div.innerHTML = span;
})();
<div>
  Hello World
</div>

https://overcoder.net/q/584895/jquery-как-обернуть-каждый-символ-из-строки-в-пролетах

Articoli correlati