Copy from textarea to div, preserving linebreaks

问题

I've got a <textarea> and a <div> (with a <p> inside). When entering text into the area, the <p> gets updated with the content upon keyUp.

Is there a way to preserve linebreaks (new line) from the textarea and somehow get them to work like linebreaks in the div/p?

Replacing double "new line" with </p><p>, is that possible as well? This is close to what a wysiwyg would handle, but don't want that for this, wich is a very small project.

This is what I've got so far.

$(".box textarea").keyup(function () {
  var value = $(this).val();  
  $('.box p').text(value);
});

回答1:

You can simply do this:

$('.box textarea').keyup(function() {
    var value = $(this).val().replace(/\n/g, '<br/>');
    $(".box p").html(value);
});

This will replace all the line breaks \n in your textarea element and replace them all with html <br/> tag, so that you can preserve the line breaks in your textarea inside <p> tag element also.

Simple Demo Here:

$('.box textarea').keyup(function() {
  $(".box p").html(this.value.replace(/\n/g, '<br/>'));
});

textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
}

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

If you can make changes to your css files, then you can also try the below solutions as suggested by @Explosion Pills. Even though you will have to still use the jquery code here to add the textarea entered text to p tag on keyup event like:

$('.box textarea').keyup(function() {
  $(".box p").html(this.value);  // replace is not needed here
});

textarea,p {
  width: 90%;
  height: 80px;
}
p {
  border: 1px solid #eee;
  padding: 5px;
  white-space: pre; // <--- This is the important part
}

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

回答2:

You probably want to add the CSS rule white-space: pre or white-space: pre-wrap to .box p. This will display whitespace as-is.

回答3:

Here's the simplest and safest pure jQuery solution:

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box p').text(value).css('white-space', 'pre-wrap');
});

Of course, if you can add .box p { white-space: pre-wrap } to your static CSS styles, then you don't need to inject it with jQuery.

(Also note that white-space: pre-wrap also causes multiple consecutive spaces to be preserved, and not to be collapsed into a single space. If you don't want that, but still want to preserve line breaks, use white-space: pre-line instead.)

Ps. You should never pass unescaped user input to .html() (as e.g. the currently accepted answer does), since doing so will cause mangled output if the input contains any HTML metacharacters like & or <, and can also open you to HTML injection and cross-site scripting (XSS) attacks if the input can ever be influenced by a malicious attacker.

If you absolutely insist on not using the CSS white-space property in any form, you will need to first escape any HTML metacharacters in the input before adding <br> tags into it. Probably the simplest and safest way to do that is to let the browser handle the escaping for you, e.g. like this:

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box div.output').text(value).html(function (index, html) {
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
  });
});

This will first copy the input text into the target element using .text() (which automatically HTML-escapes it) and then modifies the resulting HTML code to remove trailing whitespace from lines, to collapse multiple consecutive linefeeds into paragraph breaks, and finally to replace single linefeeds with <br>tags.

(Note that, in order to allow multiple paragraphs in the output, the target element should really be a <div>, not a <p> element. Nesting one <p> element inside another is not valid HTML, and may not produce consistent results on different browsers.)

回答4:

Use string.replace("\n", "<br/>") to replace any line breaks in your text area to a new line in your page.

JavaScript:

<script type="text/javascript">
function ta()
{
taValue = document.getElementById("ta").value;
taValue = taValue.replace("\n", "<br/>");
document.getElementById("tatext").innerHTML = taValue;
}
</script>

HTML:

<textarea id="ta" onkeyup="ta()"></textarea>
<div id="tatext"></div>

来源：https://stackoverflow.com/questions/16165286/copy-from-textarea-to-div-preserving-linebreaks

标签

javascript

jquery

html

textarea