Preview div cannot display 'text' on 2nd line

Question

In my comment box, I want user comment with emoticon and display yet. But textarea can support only plain text, so I add a div where comment preview before submit.

Here in my work:

var smileys = {
  ':)': '<img src="smilies/smile.gif" border="0" alt="" />',
  ':-)': '<img src="smilies/smile.gif" border="0" alt="" />'
};

$(document).ready(function() {
  $(".chat > textarea").bind("keyup", function(e) {
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
});

function smilyMe(msg) {
  //smiley replace
  return msg.replace(/(\:\)|\:-\)|\:D|\:-D|\blol\b|\:-\||\:-\(|\;-\))/g, function(all) {
    return smileys[all] || all;
  });
}

div#maintbox {
 border: 2px solid #ccc;
 padding:0px;
 overflow:auto;
 width: 450px;
 margin-bottom:3px;

}
div.chat {
  width: 400px;
}
div.chat > div {
  width: 400px;
  color:#000000;
  padding: 0px 0px 5px 0px;
  z-index:997;
}

div.chat > textarea {
  width: 400px;
  background: transparent;
}

<div id="maintbox">
<div class="chat">
  <div>
  </div>
    <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
</div>
  <div align="right" style="width:30px;float:right;"><img src="images/camera.png" width="25" alt="Upload image" id="uploadMedia" style="padding:2px;cursor:pointer;" /></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

My Question

When I press enter to go 2nd line and write any 'text', Preview div cannot display 'text' on 2nd line, Its display 'text' on same line.

The line break in the `textarea` needs to be replaced with a `
` element in the `div`. — emerson.marini, Jan 27 '15 at 16:18
possible duplicate of [How do I replace all line breaks in a string with
tags?](http://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-tags) — emerson.marini, Jan 27 '15 at 16:18
Sir. Line break work well in textarea but cannot display in preview window. — koc, Jan 27 '15 at 16:21
Read the answer on the provided link. As a side note, you're having some problems interpreting what I'm actually saying. To display the line break present in the `textarea` also in the `div`, it needs to be replaced with a `
` element, because the `div` content is rendered as `HTML`, and not plain text. — emerson.marini, Jan 27 '15 at 16:22
Sir. Where and how I add this line str = str.replace(/(?:\r\n|\r|\n)/g, '
'); for test Please. — koc, Jan 27 '15 at 16:29
You can adapt your own code to take care of both the emoticons and this bit. — emerson.marini, Jan 27 '15 at 16:30
MelanciaUK Thank u so much. Its solved. I cannot understood at 1st how to explain my problem and search here for solved it. Thank again sir. — koc, Jan 27 '15 at 16:53

score 0 · Accepted Answer · answered Jan 27 '15 at 17:07

may be try this.first add <br> then do rest:

 var smileys = {
  ':)': '<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" border="0" alt="" />',
  ':-)': '<img src="http://labs.google.com/ridefinder/images/mm_20_green.png" border="0" alt="" />'
};//images here are for demo add your images for use.

 $(document).ready(function() {
      $(".chat > textarea").bind("keyup", function(e) {
        $(".chat > div").html(smilyMe($(".chat > textarea").val()));
      });
    });

 function smilyMe(msg) {
    msg=msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
    return msg.replace(/(\:\)|\:-\)|\:D|\:-D|\blol\b|\:-\||\:-\(|\;-\))/g, function(all) {
      str= smileys[all] || all;
      return str;
     
    });
  }

 div#maintbox {
 border: 2px solid #ccc;
 padding:0px;
 overflow:auto;
 width: 450px;
 margin-bottom:3px;

}
div.chat {
  width: 400px;
}
div.chat > div {
  width: 400px;
  color:#000000;
  padding: 0px 0px 5px 0px;
  z-index:997;
}

div.chat > textarea {
  width: 400px;
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maintbox">
<div class="chat">
  <div>
  </div>
    <textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
</div>
  <div align="right" style="width:30px;float:right;"><img src="images/camera.png" width="25" alt="Upload image" id="uploadMedia" style="padding:2px;cursor:pointer;" /></div>
</div>

Preview div cannot display 'text' on 2nd line

1 Answers1