JQuery: разбить текст на коробки

Question

Как я могу превратить HTML ниже,

<h3>Break me</h3>

в

<h3>
<span class="box-letter">B</span>
<span class="box-letter">r</span>
<span class="box-letter">e</span>
<span class="box-letter">a</span>
<span class="box-letter">k</span>
<span class="box-letter">&nbsp;</span>
<span class="box-letter">m</span>
<span class="box-letter">e</span>
</h3>

$("h3").text(); это все, что я могу придумать!(стыдно ...)

css,

.box-letter {
    display:block;
    clear:both;
    width:50px;
    border:1px solid #000;
    }

Спасибо.

Answer 1

Вы захотите взять значение H3, как вы уже догадались, а затем разбить его на массив символов. После этого вы можете поменять определенные символы для их html-сущностей:

// Get the text string
var str = $("h3").text();

// Get an array of each character
var chars = str.split("");

Затем вы можете перебрать массив (символы) и преобразовать все, что вам нравится:

Вот хороший пример того, как с этим справиться: Как декодировать HTML-объекты с помощью jQuery?

Надеюсь, это поможет!

Answer 2

$('h3').each(function() {
  var data = $(this).text();
  var char;
  var output = '';

  for(i = 0; i < data.length; i++) {
    char = data.charAt(i);
    output += '<span class="box-letter">' + ((char == ' ') ? '&nbsp;' : char) + '</span>';
  }
  $(this).html(output);
});

Answer 3

// Splits the string into a "character array"    
var charArray = $('h3').text().split(''); 
// Clear the html of h3 so we can change it    
$('h3').html(''); 
for (var i = 0; i < charArray.length; i++)
{
  // for each character, append it to h3 with a span wrapper
  $('h3').append('<span class="box-letter">' + ((charArray[i] == ' ') ? '&nbsp;' : charArray[i]) + '</span>')
}

Answer 4

Я не знаю, хотите ли вы интервалы или просто пытаетесь разбить слово, которое вы могли бы сделать с помощью:

h3 { width: 5px; word-wrap: break-word; }

См. JsFiddle

Answer 5

Попробуйте:

<h3>helloworld</h3>

С javascript:

var target = $("h3");
var orig = target.text().trim();
target.empty();

for(var i=0; i < orig.length; i++){
    target.append("<span class='box-letter'>"+orig[i]+"</span>");
}

Чтобы получить:

<h3 id="foo">
    <span class='box-letter'>H</span>
    <span class='box-letter'>e</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>w</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>r</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>d</span>
</h3>

Может потребоваться ручная проверка на наличие "пустых" букв для  , однако ...