javascript - Wrap individual character in <span> on keyUp using jQuery - Stack Overflow

admin管理员组

文章数量:1305901

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>

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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 29, 2016 at 16:51 Mark Rotteveel 109k229229 gold badges156156 silver badges220220 bronze badges asked Dec 21, 2016 at 10:20 Aamir ShahzadAamir Shahzad 6,83488 gold badges4949 silver badges7272 bronze badges 1

• @ScanQR - Look ath the questions That's OP not required but output e like this – Sudharsan S Commented Dec 21, 2016 at 10:32

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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

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./ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something...">

You need to split the content by .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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='text'>ABC</div>

Since goal is to type/replace (simultaneously!), i have 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" id="text1" type="text" placeholder="type something..."></div>

So, first - filter just text inside div, and wrap it with desired html.

P.S. span CSS is here just for test purposes.

P.S. 2 Not sure about white spaces (and desired functionality) - but they can be removed, too...

Test without span CSS: https://jsfiddle/aau75w9q/4/ (produced HTML is what is required, if i understand correctly)

What about splitting your string first ?

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

本文标签： javascriptWrap individual character in ltspangt on keyUp using jQueryStack Overflow