javascript - How to preserve a line break - Stack Overflow

admin管理员组

文章数量:1193347

Line breaks and carriage returns... Must be the most complicated part of coding. (for me)

Have this code in a page (which came from database stored as This from Ricardo\nAnd also a test\nRent 3000.00):

<td title="This from Ricard
And also a test
Rent 3000.00" style="width:198px;text-align:left">....</td>

Then use this to get the title attribute with 'hidden' \n's

var v = $('#'+i).parent().attr('title');        // i = id of <span> child of <td>

Along the way, the line breaks get lost and using the variable v into a text input box:

This from RicardAnd also a testRent 3000.00

What does it take to preserve the \n's and have this look instead like below?

Line breaks and carriage returns... Must be the most complicated part of coding. (for me)

Have this code in a page (which came from database stored as This from Ricardo\nAnd also a test\nRent 3000.00):

<td title="This from Ricard
And also a test
Rent 3000.00" style="width:198px;text-align:left">....</td>

Then use this to get the title attribute with 'hidden' \n's

var v = $('#'+i).parent().attr('title');        // i = id of <span> child of <td>

Along the way, the line breaks get lost and using the variable v into a text input box:

This from RicardAnd also a testRent 3000.00

What does it take to preserve the \n's and have this look instead like below?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 16, 2012 at 0:44 David asked Sep 15, 2012 at 22:47 DavidDavid 3,32311 gold badge4141 silver badges5757 bronze badges 4

• 1 Is your text-input-box multi-line or one-line? Do you want \n to be written out or just be there as breaks? – nooitaf Commented Sep 15, 2012 at 22:54
• 3 you have to parse string for \n and then escape your `\` with `\\`.. – Aman J Commented Sep 15, 2012 at 22:55
• @FrançoisWahl: Thats where he get's it from. then he says breaks get lost and using the variable v into a text input box. I assume he is setting the value of the text-input to the value v he got from the td title. – nooitaf Commented Sep 15, 2012 at 23:12
• @n0oitaf: Yeah, I only noticed this later. I had misunderstood the question originally and thought OP wanted to have the line-breaks showing correctly in a span within the HTML. Didn't realise until only now the intend was to show \n. I also removed my answer as it just was a repeat of Kryz's answer at the end. SO didn't inform me of any new answers so I didn't refresh my page not seeing the other answers. – Nope Commented Sep 15, 2012 at 23:25

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 18

The line breaks are still there, it is just that the browser tries to render them.

If you still want to see the "\n" try this:

var v = $('td:first-of-type').attr('title').replace(/\n/g, "\\n");

Else, if what you want is NOT to see the "\n" and instead see the line breaks, you could do it this way:

var v = $('td:first-of-type').attr('title').replace(/\n/g, "<br/>");

Check this JSBin

you can use javascript global methods escape() to encode your string v and unescape() to decode it back for use.

here is your5 fiddle

http://jsfiddle.net/jYNKG/

in your code this line can be like this

var v = escape($('#'+i).parent().attr('title'));

Well, if you put the string into a text input box, there will be no new lines since the text input box is for single-line only text.

The \n are there - you can try splitting by them:

lines = str.split("\n")

You would need to read this from the database directly. The line endings are being interpreted when the HTML is being generated for the site which is why you see the multi-line td element in the code.

When you go to reference that td element, it spits out the value in a single line. Once this data is lost, you can't recreate it in any manner.

According to the HTML specification all line breaks should be "escaped" aka replayed by 


http://www.w3.org/TR/2006/REC-xml11-20060816/#sec-line-ends

http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize

This question had me curious, so I had to check the source: http://www.w3.org/TR/html401/struct/global.html#adef-title

The W3C is completely silent on how various form of white space within an attribute is treated, so I am force to assume it follows the same rules as HTML.

Under HTML, unless under a <PRE> element or similar CSS rule, all white space is collapsed to a single space for rendering.

Thus:

<p>The    quick  brown
fox
jumped



over the
lazy dog</p>

is rendered the same as:

<p>The quick  brown fox jumped over the lazy dog</p>

This HTML behavior, combined with fact that user agents (browsers) may render the TITLE attribute in any way they wish, makes it likely that most (if not all) such agents would have no reason to preserve end-of-line markers (carriage return and newline or \r\n).

Edit:

If the formatting is important, the title text could be escaped and put inside a data-* element. Using a mouse-over, a custom popup box could show the formatted HTML instead.

Edit 2 - Taken from your original question:

<td data-title="This from Ricard<br><br>And also a test<br>Rent 3000.00"
style="width:198px;text-align:left">
 ....
</td>

You can read more about data-* attributes here: http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

In short, in some mouseover code, you can find the text with:

var mytitle = <element>.getAttribute("data-title");

Then use a popup div to display mytitle

本文标签： javascriptHow to preserve a line breakStack Overflow