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");
});
});
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>
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>
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>
var textWrapper = document.querySelector('h1'); textWrapper.innerHTML = textWrapper.textContent.replace(/\\S/g, "<span class='letter'>$&</span>");
<h1>Hello world</h1>
$("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
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");
}
});
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)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.