Wrap an individual character in <span> on keyUp using jQuery

Question

I want each character to be wrapped in <span></span> , and the output of desire is <span>a</span><span>b</span><span>c</span> .

I tried to follow but did not help.

JSFIDDLE

 <div contenteditable="true" id="text1" type="text" placeholder="type something..."> $(function() { $("#text1").keyup(function(event) { $(this).wrapInner( "<span class='test'></span>" ) }); }); 

He infers the following; this is not what i need. 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 a code tag below the input div to control the contents 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> 

The pure char replacement function is as follows:

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

Here is another case where case-sensitive func keypress used along with preventDefault() to prevent the appearance of an excess character:

 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

that's 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

How about splitting your string?

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

Answer 4

You need to split the contents into .split("")

 var myText = $("#text").html(); var myTextArr = myText.split(""); $("#text").empty(); myTextArr.forEach(function(val, idx){ $("#text").append("<span class='test'>" + val + "</span>"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='text'>ABC</div> 

Answer 5

You can try using text() and make substr() ti get the last character entered recently and add <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..."> 

Answer 6

Since the goal is to type / replace (at the same time!), I used this:

 arr=[]; $(function() { $("#text1").keyup(function(event) { clean=$( this ) .contents() .filter(function() { return this.nodeType === 3; }).text(); output=""; arr.push(clean.charAt(clean.length-1)); for(i=0;i<arr.length;i++) { output+="<span class='test'>"+arr[i]+"</span>"; } $(this).html(output); //console.log(output); }); }); 

 #text1 { border: 1px solid #ccc; height:200px; } .test { background:pink; color:white; margin-left:3px; display:inline-block; width:10px; } 

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

So first - filter only the text inside the div and wrap it with the desired html.

PS span CSS is here for testing purposes only.

PS 2 Not sure about white spaces (and desired functionality) - but they can also be deleted ...

Test without CSS space: https://jsfiddle.net/aau75w9q/4/ (the generated HTML is what is required if I understand correctly)