Wrap individual character in <span> on keyUp using jQuery

Question

I want to wrap each character to wrapped in a <span></span> and desire output is <span>a</span><span>b</span><span>c</span>.

I have tried following but its not helping.

JSFIDDLE

<div contenteditable="true" id="text1" type="text" placeholder="type something...">

$(function() {
  $("#text1").keyup(function(event) {
    $(this).wrapInner( "<span class='test'></span>" )
  });
});

It outputs following; which is not what I required. Any help?

<span class="test">
<span class="test">
    <span class="test">
        <span class="test">ffdf</span>
        </span>
    </span>
</span>

Answer 1

Here is my solution. There is tag code below the input div, for control what is content of the div:

txt = $("#text1").html();
$("#out").text(txt);
$(function() {
    $("#text1").keyup(function(event) {
        txt = txt + "<span class='test'>"+String.fromCharCode(event.which)+"</span>";
        $(this).html(txt);
        $("#out").text($(this).html());
    });
});

#text1 {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<code id="out"></code>

Pure function of replacing char looks like:

txt = $("#text1").html();
$(function() {
    $("#text1").keyup(function(event) {
        txt += "<span>" + String.fromCharCode(event.which) + "</span>";
        $(this).html(txt);
    });
});

Here is another one where case-sensitive func keypress used along with preventDefault() to prevent a redundant character appear:

txt = $("#text1").html();
$(function() {
    $("#text1").keypress(function(event) {
       txt += "<span>" + String.fromCharCode(event.which) + "</span>";
       event.preventDefault();
       $(this).html(txt);
       $("#out").text(txt);
    });
});

#text1 {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>
<code id="out"></code>

Answer 2

is this what you need ?

$(function(){
$("#text1").keyup(function(event) {
$('.test').each(function (index) {
    var characters = $(this).text().split("");
    
    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
    $this.append("<span>" + el + "</span");
    });

});

});
});

#text1 {
    background: #ccc none repeat scroll 0 0;
    height: 24px;
    width: 127px;
}

<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>

<span class="test">ffdf</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

May be try using text() and do substr() ti get last character entered recently and add the <span>

$(document).ready(function() {
  $("#text1").keyup(function(event) {

    var txt = $(this).text();
    $(this).wrapInner("<span class='test'>" + txt.substr(txt.length, txt.length - 1) + "</span>");
  });
});

#text1 {
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something...">