Preserve line breaking when Replicate val() content in span

Question

Good afternoon, according to this topic - /questions/203969/replicar-conte%C3%Bado-de-val-em-span I have the following code

$('textarea.skills_knowledge').blur(function() {
    var skills_knowledge = $(this).val();
    $('span.skills_knowledge').html(skills_knowledge); });

would like to know how to preserve line breaks, ie if you press enter in the text area, appear this in span properly one below the other

I don’t know if it’s the best format, I accept suggestions for improvement, but I found this format in topical -/questions/40803/uso-de-val-no-script-me-faz-quebras-linha?rq=1

$('textarea.skills_knowledge').blur(function() {
    var skills_knowledge = $(this).val();
    var skills_knowledge = skills_knowledge.replace(/\r?\n/g, '<br />');
    $('span.skills_knowledge').html(skills_knowledge); });

Answer 1

This code will replace all line breaks \n in tags <br/>, combinations are to work in several browsers.

$('textarea.skills_knowledge').blur(function() {
  var skills_knowledge = $(this).val();
  skills_knowledge = skills_knowledge.replace(/\r\n|\r|\n/g, "<br/>");
  $('span.skills_knowledge').html(skills_knowledge);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="skills_knowledge"></textarea>

<span class="skills_knowledge"></span>