Can't get carriage returns in div

[mattrapoport]

I have a page with a div on it. The div displays a user comment. When
the user logs into this page, their current comment is pulled from a db
and displayed in the div. The user can edit the comment through a
pop-up that contains a textarea. When the user hits OK on the pop-up,
the text in the textarea is sent to a function on the main page. The
function inserts the text into the div's text node.

Please don't ask why I'm making this so complicated - there are other
things going on on the page and the pop-up that are irrelevant to my
problem.

Everything works perfectly except when the user puts carriage returns
in their comment. For some reason I can't get the carriage returns to
show up in the div. BUT! When they view the existing comment in the
div (the one pulled from the database) the carriage returns are
displayed. That initial display does not use any javascript - it's
just php so the page is initially rendered with the text in the div.

So it seems that when I programmatically put text into my div, the
carriage returns don't show. But if the page is rendered with the text
already there, the carriage returns do show.

This seems like it should be so simple, what am I doing wrong??? Do I
have to replace the carriage returns with a different character (e.g.
<br>, \n, \r, \n\r, \r\n)? Or is there a css setting for the div?

Any help would be greatly appreciated.

- Matt

 

[Ivo]

Please don't ask why I'm making this so complicated - there are other
things going on on the page and the pop-up that are irrelevant to my
problem.

But may I ask why ...oh well.

Everything works perfectly except when the user puts carriage returns
in their comment. For some reason I can't get the carriage returns to
show up in the div. BUT! When they view the existing comment in the
div (the one pulled from the database) the carriage returns are
displayed. That initial display does not use any javascript - it's
just php so the page is initially rendered with the text in the div.

Look at the HTML source produced by the PHP. What carriage returns? Are they

This seems like it should be so simple, what am I doing wrong??? Do I
have to replace the carriage returns with a different character (e.g.
<br>, \n, \r, \n\r, \r\n)? Or is there a css setting for the div?

If you 're using the innerHTML property of the div to insert the new
content, then
something like thestring.replace( /\r?\n/g, '<br>' ) might just be enough,
yes. A more standards-compliant appraoch might involve splitting the string
into an array and <p> elements for every bit.
Have you tried any of that replacing? What happened?
ivo

 

[mattrapoport]

But may I ask why ...oh well.


Look at the HTML source produced by the PHP. What carriage returns? Are they


If you 're using the innerHTML property of the div to insert the new
content, then
something like thestring.replace( /\r?\n/g, '<br>' ) might just be enough,
yes. A more standards-compliant appraoch might involve splitting the string
into an array and <p> elements for every bit.
Have you tried any of that replacing? What happened?
ivo

In the HTML source produced by the PHP the new line character used is
<br>. It works like a charm. When I replace \n and/or \r with <br>,
the <br> is displayed in the text - it is not processed as a new line.

I've tried pretty much every permutation of string.replace. No luck
yet.

Also, I'm not using innerHTML (trying to stay w3c compliant). I'm
directly changing the value of the text node within the DIV.

- Matt

 

[Ivo]

In the HTML source produced by the PHP the new line character used is
<br>. It works like a charm. When I replace \n and/or \r with <br>,
the <br> is displayed in the text - it is not processed as a new line.

I'm not using innerHTML (trying to stay w3c compliant). I'm
directly changing the value of the text node within the DIV.

The <br> is not a character, it 's four characters that make up a tag, some
say, or an element, say others. In any case, if it 's fed into a textnode,
well, yes, it will be treated as text, four characters of it.
What you want to do is:
- split your text into pieces at every occurance of a \n in the textarea
(carriage return)
- loop through the pieces, and in the loop:
- - add them to the div using document.createTextNode one by one
- - add a document.createElement( 'br' ) after each one

Or like I said earlier, create a series of <p> elements.
Example code, using a textarea but not in a popup, follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Title goes here</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">//<![CDATA[
function addtext() {

var s = document.getElementById( 'thetext' ).value.split( /\n/ ), i = 0,
d = document.getElementById( 'thediv' );

while( d.firstChild ) { d.removeChild( d.firstChild ); }
// This clears any text previously added; remove the line and
// the div will continue to grow each time the function is run.

do {
d.appendChild( document.createTextNode( s[i++] ) );
d.appendChild( document.createElement( 'br' ) );
} while( s );

}
//]]></script>
</head><body>

<div>
<textarea rows="4" cols="40" id="thetext">
Line one

This is the thid line.
</textarea>
<input type="button" value="Set text" onclick="addtext();"/>
</div>
<div id="thediv">
</div>

</body></html>

Watch out during testing that you do not accidentally create infinite loops
in the 'do-while' block. It 's tricky construct. A loop that uses 'for' is
usually safer, but slower. Another increase in speed and efficiency might be
achieved by copying nodes using the cloneNode method instead of the repeated
calls to createTextNode and createElement. The worth of these considerations
does depend on the kind of the texts you expect from your users.
In any case, try to avoid the pop up window.
hth
ivo
http://4umi.com/web/javascript/

 

[Julian Turner]

(e-mail address removed) wrote:

[snip]

I've tried pretty much every permutation of string.replace. No luck
yet.

Also, I'm not using innerHTML (trying to stay w3c compliant). I'm
directly changing the value of the text node within the DIV.

Changing the text node may be why you are having no luck. If you
insert "<br>" in the text node, then it will not be parsed as a BR
element, it will simply become - &lt;br&gt; - and show up as content
rather than mark-up.

Some options are:-

1. Try creating a PRE element and inserting the text as a Text node
of the PRE element, although I think Internet Explorer still strips out
\n\r when programmatically inserted into text nodes.

2. Use innerHTML

This is relatively widely supported in the latest browsers I think.

In which case when moving text from the textarea you will need to first
escape the text by replacing all "<" ">" and "&" characters in the
inputted text (so they are not wrongly seen as markup) and secondly do
the replace for \n and \r to <br>.

3. Manually create a series of Text and BR nodes.

I.e. split the user input with:-

var aLines=myString.split(/\r\r|\n\r|\r\n|\r|\n/)

and then for each line insert
- a Text node, and then a BR node,
- or alternatively a P node containing a Text node.

Regards

Julian Turner

 

[mattrapoport]

All the major browsers support it. They may differ slightly as to
exactly how they implement it - but for this sort of use, I doubt you'll
notice any difference.

It has the additional advantages of (a) being faster, and (b) using less
code.

Thanks to everyone for their helpful remarks. As an aside, this is the
first time I have ever seen posts on a web-related newsgroup
recommending a non-standards compliant solution!

But your arguments are compelling and I'm going to make the switch to
innerHTML. Thanks again!

- Matt