jquery: break text into boxes

Question

How can I turn the html below,

<h3>Break me</h3>

to

<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(); that's all I can think of! (feeling ashamed...)

css,

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

Thanks.

Ivan · Accepted Answer · 2011-06-02T20:55:30.940

1

// 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>')
}

edited Jun 02 '11 at 20:55

answered Jun 02 '11 at 20:48

Ivan

10,052
12
47
78

1

+1 You'll want to update the append line to account for whitespace $('h3').append('' + ((charArray[i] == ' ') ? ' ' : charArray[i]) + ''); – NakedBrunch Jun 02 '11 at 20:52

score 1 · Answer 2 · answered Jun 02 '11 at 20:52

$('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);
});

score 1 · Answer 3 · edited May 23 '17 at 10:00

You'll want to take the value of H3 as you guessed and then split it into an array of characters. After that you can swap out certain characters for their html-entities:

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

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

Then you can loop over the array (chars) and convert whatever you'd like:

Here is a good example of how to handle this: How to decode HTML entities using jQuery?

Hope that helps!

score 0 · Answer 4 · answered Jun 02 '11 at 20:52

Try:

<h3>helloworld</h3>

With 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>");
}

To get:

<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>

Might need a manual check for "blank" letters to  , however...

Shouldn't you use charAt(i) -- not [i] -- to access the character of a string at index i? *EDIT*: Although both methods of getting a character are supported by most browsers, I wouldn't rely on using str[i]. — Ivan, Jun 02 '11 at 20:53

score 0 · Answer 5 · answered Jun 02 '11 at 20:54

0

I don't know if you are wanting the spans or whether you are just trying to break the word, which you could do with:

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

See jsFiddle

answered Jun 02 '11 at 20:54

Code Maverick

20,171
12
62
114

jquery: break text into boxes

5 Answers5