2

If I grab some html from one element, then attempt to assign it as the text content of another element, newlines are not preserved (at least not in the latest Firefox and Chromium).

So, for example, the follow code (with sensible html) produces output where the newlines are replaced by spaces. Well, except the alert, which works as expected.

$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });

Here's a running example: http://jsfiddle.net/76S7z/2/

There should be some method of setting the html of one element as the text of another while preserving newlines properly.

Is this possible with "text" or "textContent"? Is there an alternative way to do this? Is there a simple workaround? A less than simple workaround?

Michael Plotke
  • 951
  • 1
  • 15
  • 38
  • 3
    With "newlines", you mean the `br` elements? Or actual new line characters in the HTML (which are not rendered anyway). Maybe you are looking for using `.html` instead of `.text` to set the content. From the `.text` documentation: *"We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML"*, which is what happens with `
    `.     – Felix Kling Jan 10 '14 at 00:15
  • No, not looking for ".html". I'm very specifically looking to set the html of one element as the text of another. Honestly, the text. – Michael Plotke Jan 10 '14 at 00:18
  • well you are grabbing HTML and the new lines are represented via HTML (br). Not \r or \n, so when you do .text it will strip all the br tags. You can try and replace all
    's with something temporarily and the switch them back after you move the text/html. Also depending on what type of element you are moving it into will depend on how you can get your line breaks back.     –  Jan 10 '14 at 00:25
  • The thought I'm playing with currently is using str.split("\n") first then arr.join("\n") later. – Michael Plotke Jan 10 '14 at 00:27
  • sure or do str.replace('\n','!~![somethingunique]') then do the opposite after setting the other elements text value. Many options available you just have to know how the newline is being represented in the string you are manipulating becauase it could be str.split("
    ").     –  Jan 10 '14 at 00:28
  • So, you are looking for a way to replace `
    `'s with actual newline characters?     – Felix Kling Jan 10 '14 at 00:55
  • Really what I'm trying to do is (evidently) not something browsers do. I'm trying to give the browser a string to display, which contains newlines, and have the browser respect those newlines, though whatever mechanism. I've semi-solved the issue by wrapping the text in a 
    , but that has other problems. Basically, it seems browsers simply don't work this way.
     – Michael Plotke Jan 10 '14 at 01:14

1 Answers1

9

As you've already determined, Web browsers don't normally render newline characters \n as line breaks. If you're resistent to adding the line break element <br />, you can use the white-space CSS property with the value pre-line, which will:

Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Be sure to check the property's compatibility tables before using.

<div style="white-space: pre-line;">
    Look

    at
    these line breaks!
</div>

Here's a JSFiddle example.

Jacob Budin
  • 9,753
  • 4
  • 32
  • 35