CODEWITHSUNDEEP
javascriptjquerycss
alessandrio
alessandrio

Reputation: 4370

insert line break at the end of paragraph

<div id="insert" contenteditable="true">KATATAY
puyus katatachkan
warmikunapa
</div>

and

<div id="result"></div>

jquery all that remains is to put line breaks

$('#insert').keyup(function(){
    $('#result').html('<span>'+$('#insert').text().split(/\s/).join('</span><span>'));
    $('#result').find( "span" ).addClass('over');
});

I want to make this way. the result must be so

<div id="result">
    <span class="over">KATATAY</span><br>
    <span class="over">puyus</span><span class="over">katatachkan</span><br>
    <span class="over">warmikunapa</span><br>
</div>

Upvotes: 0

Views: 191

Answers (2)

user4014802
user4014802

Reputation: 

var over = 'over';
$('#result').html(function() {
    return $('#insert').text().trim().split(/\n/).map(function(elem) {
       var ret =  '<span class="over">' 
                  + elem.split(/\s+/).join("</span><span class="+over+">") 
              + '</span></br>';
       return ret;
    });
});

Upvotes: 1

Ram
Ram

Reputation: 144659

This should do it:

$('#result').html(function() {
    return $('#insert').text().trim().split(/\n/).map(function(el) {
       return '<span class="over">' 
                  + el.split(/\s+/).join("</span><span class='over'>") 
              + '</span></br>';
    });
});

http://jsfiddle.net/ss57Z/

Upvotes: 1

Related Questions