Replace string with spans containing each character - html

Question

I would like to replace the content of an h1 element containing a character chain with the same chain but each character should be wrapped in a span.
That seemed easy enough to me, but I maybe underestimated it.
Here's what I tried (css only for debug purposes) :
var titleLen = $("#title").length - 1;
for (i=0; i<titleLen; i++) {
letter = $("#title").charAt(i);
$("#title").append("<span>" + letter + "</span>");
};
h1 span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id=title>
Hello World !
</h1>
It isn't working but I can't find the problem. Any help ?

Answer 1

Part of the reason your current code isn't working is that you're calling length and charAt on the DOM element instead of on its contents -- but even with that corrected you're modifying the contents of the div at each step of the iteration, so the second charAt would wind up reaching part of the span you just inserted instead of the second character of the original string. (Edit: I've just realize this description isn't quite right; you would wind up with a span-wrapped copy after the original text, because you append instead of replacing.)
Here are a couple of different ways you could use your original algorithm:
// keep a copy of the original string and work from that:
var title = $("#title").html();
$('#title').html('');
for (i = 0; i < title.length; i++) {
letter = title.charAt(i);
$("#title").append("<span>" + letter + "</span>");
};
// Alternatively, build a string and dump it into the DOM all at once:
/*
let output = '';
for (i = 0; i < $('#title').html().length; i++) {
letter = $('#title').html().charAt(i);
output +="<span>" + letter + "</span>";
};
$('#title').html(output);
*/
h1 span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id=title>
Hello World !
</h1>
Or a simpler way to do this is to split the string into an array for each character, then use 'join' to include the span tags:
$('#title').html(
'<span>' +
$('#title').html().split('').join('</span><span>') +
'</span>'
)
h1 span {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id=title>
Hello World !
</h1>