jQuery - How to wrap each character from a string in spans

Question

How can I convert the characters of a div into spans?

For example, I'd like to convert this:

<div>
    Hello World
</div>

Into this:

<div>
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    <span>W</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
</div>

I've tried this StackOverflow suggestion, but that converts spaces into spans. What I need is to convert only characters to spans:

$("div").each(function (index) {
    var characters = $(this).text().split("");

    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
        $this.append("<span>" + el + "</span");
    });
 });

[`$('div').html(function(i, html) { return html.replace(/\S/g, '$&'); });`](https://jsfiddle.net/tusharj/tfb90wut/) — Tushar, Dec 13 '16 at 07:11

Pranav C Balan · Accepted Answer · 2016-12-13T08:32:04.837

5

You can use String#replace method and html() method with a callback to reduce the code.

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Hello World
</div>

edited Dec 13 '16 at 08:32

answered Dec 13 '16 at 07:08

Pranav C Balan

113,687
23
165
188

Danny Fardy Jhonston Bermúdez · Answer 2 · 2020-06-11T01:15:31.327

4

You can try with this simple JavaScript.

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

edited Jun 11 '20 at 01:15

answered Dec 13 '16 at 07:27

Danny Fardy Jhonston Bermúdez

5,500
5
25
37

score 1 · Answer 3 · answered Dec 13 '16 at 07:11

1

I'd prefer to use regular expression:

var txt = $('#container').text();
var newTxt = txt.replace(/\w/g,function(c){
  return '<span>'+c+'</span>';
})
$('#container').html(newTxt);

span {
  display:inline-block;
  background-color:#dfdfdf;
  color:#aaa;
  padding:3px;
  margin:3px;
  border-radius:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    Hello World
</div>

answered Dec 13 '16 at 07:11

Paweł

4,238
4
21
40

please i'd like to know what mean of function(c) what is goal of character (c) – MoHamed HaSsn Dec 13 '16 at 08:24
@MoHamedHaSsn `c` here is the string matched by regex i.e. `\w` which means alphanumeric & underscore character. – Tushar Dec 13 '16 at 08:38
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace – Paweł Dec 13 '16 at 08:43

prajeesh webandcrafts · Answer 4 · 2019-10-15T06:58:35.677

1

var textWrapper = document.querySelector('h1');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

<h1>Hello world</h1>

edited Oct 15 '19 at 06:58

answered Sep 19 '19 at 12:03

prajeesh webandcrafts

39
3

score 0 · Answer 5 · answered Dec 13 '16 at 07:08

0

$("div").each(function (index) {
var characters = $(this).text().split("");

$this = $(this);
$this.empty();
$.each(characters, function (i, el) {
if(el != ' ')
$this.append("<span>" + el + "</span");
});

put a condition for space

answered Dec 13 '16 at 07:08

Akshey Bhat

8,227
1
20
20

score 0 · Answer 6 · answered Dec 13 '16 at 07:20

try:

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

score 0 · Answer 7 · answered Dec 13 '16 at 07:24

0

tried to write as little as I can

html

<div>
    HelloWorld
</div>

js

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

answered Dec 13 '16 at 07:24

Liang

507
2
9

jQuery - How to wrap each character from a string in spans

7 Answers7

Linked