Put each letter in given div in separate span

Question

The following div contains some text and tags. I want to add <span> tag to every letter in the div.

<div id="text">Hello, <span class="name">John</span></div>

I need my output as below:

<div id="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span class="name">J</span>
  <span class="name">o</span>
  <span class="name">h</span>
  <span class="name">n</span>
</div>

or

<div id="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span class="name">
     <span>J</span>
     <span>o</span>
     <span>h</span>
     <span>n</span>
  </span>
</div>

Guys most of your reply says that I haven't tried anything. For all you I have solution if the dosn't exist in the code. I have done the below even before posting the question.

<div id="text">Hello, John</div>

Answer:

<div id="text">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
  <span>,</span>
  <span>J</span>
  <span>o</span>
  <span>h</span>
  <span>n</span>
</div>

Javascript used:

var obj=$('#text');
var text=obj.text();
text=text.split("");
var parsed="";
obj.empty();
for(var i=0; i<text.length; i++)
{
var tag=document.createElement('span');
tag.setAttribute('class','vtag');
tag.innerHTML=text[i];
obj.append(tag);
}

@Amit Joki I am sorry that i couldn't reply for u guys yesterday as I was in meeting.. You guys saying that I haven't tried anything its not like that I have tried. I could able to add the span tag for each letters But the thing is I could do it If already there is span tag inside... — vinoth kumar, May 10 '14 at 04:58

score 4 · Answer 1 · edited May 09 '14 at 13:11

4

I've (very recently) been in your shoes, not even knowing where to start. The magic words are "JavaScript DOM manipulation":

var text = document.getElementById("text");
var string = "Hello, John";
string.split("");
var i = 0, length = string.length;
for (i; i < length; i++) {
    text.innerHTML += "<span>" + string[i] + "</span>";
}

That just puts them all in spans. You should try giving it a try to get the <span class="name"> bit working on your own from here.

edited May 09 '14 at 13:11

Danubian Sailor

1
38
145
223

answered May 09 '14 at 13:03

ndugger

7,373
5
31
42

change your last span in the for loop, the " to "" or it won't work – Hawk May 09 '14 at 13:08
this answer is correct but if you want to give span only to 'Hello,' then just change string variable to be 'Hello,'. The rest is all awesome code.. – Hawk May 09 '14 at 13:14
But he wants ``s around everything. Read the question. – ndugger May 09 '14 at 13:15
there's an 'or' in the code that he provided – Hawk May 09 '14 at 13:16
Yes, but each of his options include ``s around EVERY letter, not just "Hello" – ndugger May 09 '14 at 13:17
your code is replacing with and that wasn't what he wanted certainly – Hawk May 09 '14 at 13:18
Every time I interact with you on here, I feel like I lose a handful of braincells. Please stop. – ndugger May 09 '14 at 13:19
@NickDugger I know how to add span for each thats very simply. But If the span tag already exists there that is my problem. – vinoth kumar May 10 '14 at 05:02

score 2 · Accepted Answer · answered May 09 '14 at 13:10

2

You can try something like this: http://jqversion.com/#!/LKQqeGh (with jQuery)

var $div = $('#text').clone().html('');
$('#text').contents().each(function(){
  var spanClass = '';

  if ($(this).is('span')) {
    spanClass = $(this).attr('class');
  }

  $textArray = $(this).text().split('');

  for (var i = 0; i < $textArray.length; i++) {
    $('<span>').addClass(spanClass).text($textArray[i]).appendTo($div);
  }
});

$('#text').replaceWith($div);

answered May 09 '14 at 13:10

Mihai Matei

24,166
5
32
50

Just my personal opinion, but as it seemed he did not try anything yet, you should not have given him the full solution. – ndugger May 09 '14 at 13:11
He's lucky today :) God bless us! :)) – Mihai Matei May 09 '14 at 13:12
1

It's not about luck, it's about learning. He can't learn if he doesn't try anything on his own. – ndugger May 09 '14 at 13:13
@NickDugger I have solution for adding span tag for each question even before posting this question. But the span tag already exist in the string thats my problem. I think am not very clear with my question I will edit it now. ] – vinoth kumar May 10 '14 at 05:04
This is great, but I can't figure out how to make it respect the spaces between words. – oneday Jul 15 '16 at 15:24
@NickDugger I will say that's only partially true. If a person is attempting to code or is a budding developer, every part of what we do is trying something. Lots of people learn by example—and efficiency sometimes involves consulting experts who have already been down the road you are on. That's why open source exists... Who knows, he might expand on this answer. – Dexter Adams Feb 03 '23 at 15:52

score 2 · Answer 3 · answered May 09 '14 at 13:17

HTML :

<div id="text">Hello, <span class="name">John</span></div>

Pure Javascript :

var text = document.getElementById("text");
var msg = text.textContent;
var name = document.getElementsByClassName("name")[0].textContent;

// remove name from msg
msg = msg.substring(0,msg.length - name.length);
// to char array
msg = msg.split('');
name = name.split('');

text.innerHTML = "<span>" + msg.join("</span><span>") + "</span>";
text.innerHTML += "<span class=\"name\">" + name.join("</span><span class=\"name\">") + "</span>";

Demo JSFiddle

your solution is good only if the last has tag. Also if there is only one in the string. What if there is more than one and if it is in different position. — vinoth kumar, May 10 '14 at 05:07

Put each letter in given div in separate span

3 Answers3

Linked