How to transfer breaks from a textarea ?

[EnjoyNews]

Hi

I have a little probelm.

I tranfer som data from input fields to a div so you can see how a profil
will look as you type in your data.
I just put this in my input field:
onkeyup="document.getElementById('javao').innerHTM L=this.value;"
And this : <span id="javao"></spansomewhere else on the page.

This works fine and I also do the same thing with a textarea.
But... The breaks made in the textfield is not tranfered to the div.
I have search the net but can't seem to find anything about it. I have also
tried different solutions using nl2br and so on, but I just can't get it to
work.
So the quetion is, how do I transfer the the enter key from a textarea ?

[GArlington]

On Sep 12, 9:03*am, "EnjoyNews" <[e-mail]:

Hi

I have a little probelm.

I tranfer som data from input fields to a div so you can see how a profil
will look as you type in your data.
I just put this in my input field:
onkeyup="document.getElementById('javao').innerHTM L=this.value;"
And this : <span id="javao"></spansomewhere else on the page.

This works fine and I also do the same thing with a textarea.
But... The breaks made in the textfield is not tranfered to the div.
I have search the net but can't seem to find anything about it. I have also
tried different solutions using nl2br and so on, but I just can't get it to
work.

So the quetion is, how do I transfer the the enter key from a textarea ?

You need to replace all <cr><lf[text end-of-line] in textarea with
<br/[HTML end-of-line]

[EnjoyNews]

"GArlington" <ga********@tiscali.co.ukskrev i en meddelelse
news:11**********************************@e53g2000 hsa.googlegroups.com...
On Sep 12, 9:03 am, "EnjoyNews" <[e-mail]:

Hi

I have a little probelm.

I tranfer som data from input fields to a div so you can see how a profil
will look as you type in your data.
I just put this in my input field:
onkeyup="document.getElementById('javao').innerHTM L=this.value;"
And this : <span id="javao"></spansomewhere else on the page.

This works fine and I also do the same thing with a textarea.
But... The breaks made in the textfield is not tranfered to the div.
I have search the net but can't seem to find anything about it. I have
also
tried different solutions using nl2br and so on, but I just can't get it
to
work.

So the quetion is, how do I transfer the the enter key from a textarea ?

You need to replace all <cr><lf[text end-of-line] in textarea with
<br/[HTML end-of-line]

ok... so the line breaks is actually <cr><lfin a textarea ?
But how do I replace this on the run in javascript ?

[Dr_KralNOSPAM]

On Fri, 12 Sep 2008 11:21:11 +0200, "EnjoyNews" <mh********@mail.dkwrote
in <48***********************@dtext02.news.tele.dk> :

>
ok... so the line breaks is actually <cr><lfin a textarea ?
But how do I replace this on the run in javascript ?

Something of this sort --

function clean(asd) {
asd=asd.replace(/\r/g,"") //supress 'returns' used in IE and Opera
asd=asd.replace(/\n/g,sing) //new line --space or <br }

(yes, can be inline as
newstring=oldstring.replace(/\r/g,"").replace(/\n/g,sing)

where sing = "<br>" or "<p>" (remember to add the </palso)

You might want to worry about tabs (\t) and extra spaces and multiple
'enter's

[EnjoyNews]

<Dr***********@nyc.rr.comskrev i en meddelelse
news:57********************************@4ax.com...

On Fri, 12 Sep 2008 11:21:11 +0200, "EnjoyNews" <mh********@mail.dkwrote
in <48***********************@dtext02.news.tele.dk> :

>>
ok... so the line breaks is actually <cr><lfin a textarea ?
But how do I replace this on the run in javascript ?

Something of this sort --

function clean(asd) {
asd=asd.replace(/\r/g,"") //supress 'returns' used in IE and
Opera
asd=asd.replace(/\n/g,sing) //new line --space or

}

(yes, can be inline as
newstring=oldstring.replace(/\r/g,"").replace(/\n/g,sing)

where sing = "<br>" or "<p>" (remember to add the </palso)

You might want to worry about tabs (\t) and extra spaces and multiple
'enter's

Thanks for you reply...
I'm getting a little wiser everyday :o) Javascript is very new to me....

I can see what you do in the script, but how do I get it into the
onkeyup="document.getElementById('javao').innerHTM L=this.value;" line ??

[Dr_KralNOSPAM]

On Fri, 12 Sep 2008 23:30:23 +0200, "EnjoyNews" <mh********@mail.dkwrote
in <48***********************@dtext02.news.tele.dk> :

>I can see what you do in the script, but how do I get it into the

Well, I don't think you want to use 'onkeyup'. What if the user backspaces
or moves the insertion point? I would suggest using
'onblur=functionwhatever()' or even better a 'preview' button with
'onclick=functionwhatever()'.

functionwhatever should get the 'document.form.formname.textareaname.value'
and put it through the series of conversion to remove returns (/r), convert
newline(/n), white space, tab and even some special characters (what if
someone cuts and pastes with stuff like angle brackets, smart quotes and
fractions). The edited/modified/converted string is then stored as your
created element.

I used this to convert stuff --
// Cleanup extrranious characters and make html friendly
function clean(asd, sing){
asd=asd.replace(/\r/g,"") //supress 'returns' used in IE and Opera
asd=asd.replace(/\n\ \ \ /g,"\n\n") //change space indent paragraph
to double space
asd=asd.replace(/\n\t/g,"\n\n") //change tabbed indent paragraph
to double space
asd=asd.replace(/\t/g," ") //change tabs to spaces
asd=asd.replace(/\s+$/,"") //remove trailing white space
asd=asd.replace(/^\s+/,"") //remove leading white space
asd=asd.replace(/\ +\n/g,"\n") //remove trailing white space on line
asd=asd.replace(/\n\ +/g,"\n") //remove leading white space on line
i=asd.indexOf(""") //smart quotes don't work as RegExp
while (i>0){asd=asd.substring(0,i)+"\""+asd.substr(i+1); i=asd.indexOf(""")}
i=asd.indexOf(""")
while (i>0){asd=asd.substring(0,i)+"\""+asd.substr(i+1); i=asd.indexOf(""")}
i=asd.indexOf("‘")
while (i>0){asd=asd.substring(0,i)+"\'"+asd.substr(i+1); i=asd.indexOf("‘")}
asd=asd.replace(/\'/g,"\'") //single smart right quote -->
single quote
// replace common special characters
asd=asd.replace(/&/g,"&amp;") //ampersand
asd=asd.replace(/…/g,"&hellip;") //elipsis
asd=asd.replace(/\.\.\./g,"&hellip;") //three period to elipsis
asd=asd.replace(/©/g,"&copy;") //copy
asd=asd.replace(/½/g,"&frac12;") //fraction 1/2
asd=asd.replace(/¼/g,"&frac14;") //fraction 1/4
asd=asd.replace(/¾/g,"&frac34;") //fraction 3/4
asd=asd.replace(/<</g,"&laquo;") // <<
asd=asd.replace(/>>/g,"&raquo;") // >>
asd=asd.replace(/</g,"&lt;") // <
asd=asd.replace(/>/g,"&gt;") // >
asd=asd.replace(/—/g,"&mdash;") // em dash
asd=asd.replace(/---/g,"&ndash;") // -- --emdash
asd=asd.replace(/–/g,"&ndash;") // en dash
asd=asd.replace(/--/g,"&ndash;") // -- --endash
// cleanup lines and paragraphs
asd=asd.replace(/\n{2,}/g,"½¼½") //2+ new lines --½¼½
(temporary)
asd=asd.replace(/½¼½$/g,"") //remove final paragraph
asd=asd.replace(/\n/g,sing) //new line --space or <br>
asd=asd.replace(/½¼½/g,"<\/p>\n<p>") // ½¼½ --paragraph
asd=asd.replace(/\ {2,}/g,"&nbsp; ") //multiple space -->&nbsp; space
return asd }
Of course, this can just be a series of .replace(--).replace(--) except for
the swmart quotes but this is easier to read and edit. The var 'sing'
controls what to do with a single new line -- new paragraph or new line.

You also have to check that <p& </pare proper at the start and end.

Oh, it nice that you remembered your manner and said thanks. That missing
ever so often <sigh>.

[EnjoyNews]

<Dr***********@nyc.rr.comskrev i en meddelelse
news:4f********************************@4ax.com...

On Fri, 12 Sep 2008 23:30:23 +0200, "EnjoyNews" <mh********@mail.dkwrote
in <48***********************@dtext02.news.tele.dk> :

>>I can see what you do in the script, but how do I get it into the

Well, I don't think you want to use 'onkeyup'. What if the user
backspaces
or moves the insertion point? I would suggest using
'onblur=functionwhatever()' or even better a 'preview' button with
'onclick=functionwhatever()'.

functionwhatever should get the
'document.form.formname.textareaname.value'
and put it through the series of conversion to remove returns (/r),
convert
newline(/n), white space, tab and even some special characters (what if
someone cuts and pastes with stuff like angle brackets, smart quotes and
fractions). The edited/modified/converted string is then stored as your
created element.

I used this to convert stuff --
// Cleanup extrranious characters and make html friendly
function clean(asd, sing){
asd=asd.replace(/\r/g,"") //supress 'returns' used in IE and
Opera
asd=asd.replace(/\n\ \ \ /g,"\n\n") //change space indent paragraph
to double space
asd=asd.replace(/\n\t/g,"\n\n") //change tabbed indent
paragraph
to double space
asd=asd.replace(/\t/g," ") //change tabs to spaces
asd=asd.replace(/\s+$/,"") //remove trailing white space
asd=asd.replace(/^\s+/,"") //remove leading white space
asd=asd.replace(/\ +\n/g,"\n") //remove trailing white space on
line
asd=asd.replace(/\n\ +/g,"\n") //remove leading white space on line
i=asd.indexOf(""") //smart quotes don't work as RegExp
while
(i>0){asd=asd.substring(0,i)+"\""+asd.substr(i+1); i=asd.indexOf(""")}
i=asd.indexOf(""")
while
(i>0){asd=asd.substring(0,i)+"\""+asd.substr(i+1); i=asd.indexOf(""")}
i=asd.indexOf("'")
while
(i>0){asd=asd.substring(0,i)+"\'"+asd.substr(i+1); i=asd.indexOf("'")}
asd=asd.replace(/\'/g,"\'") //single smart right quote -->
single quote
// replace common special characters
asd=asd.replace(/&/g,"&amp;") //ampersand
asd=asd.replace(/./g,"&hellip;") //elipsis
asd=asd.replace(/\.\.\./g,"&hellip;") //three period to elipsis
asd=asd.replace(/©/g,"&copy;") //copy
asd=asd.replace(/½/g,"&frac12;") //fraction 1/2
asd=asd.replace(/¼/g,"&frac14;") //fraction 1/4
asd=asd.replace(/¾/g,"&frac34;") //fraction 3/4
asd=asd.replace(/<</g,"&laquo;") // <<
asd=asd.replace(/>>/g,"&raquo;") // >>
asd=asd.replace(/</g,"&lt;") // <
asd=asd.replace(/>/g,"&gt;") // >
asd=asd.replace(/-/g,"&mdash;") // em dash
asd=asd.replace(/---/g,"&ndash;") // -- --emdash
asd=asd.replace(/-/g,"&ndash;") // en dash
asd=asd.replace(/--/g,"&ndash;") // -- --endash
// cleanup lines and paragraphs
asd=asd.replace(/\n{2,}/g,"½¼½") //2+ new lines --½¼½
(temporary)
asd=asd.replace(/½¼½$/g,"") //remove final paragraph
asd=asd.replace(/\n/g,sing) //new line --space or <br>
asd=asd.replace(/½¼½/g,"<\/p>\n<p>") // ½¼½ --paragraph
asd=asd.replace(/\ {2,}/g,"&nbsp; ") //multiple space -->&nbsp; space
return asd }
Of course, this can just be a series of .replace(--).replace(--) except
for
the swmart quotes but this is easier to read and edit. The var 'sing'
controls what to do with a single new line -- new paragraph or new line.

You also have to check that <p& </pare proper at the start and end.

Oh, it nice that you remembered your manner and said thanks. That missing
ever so often <sigh>.

Hi again..

Thanks :o))

I think I get it now...
I don't think I need that many replaces. The java output has to show how the
submittet textarea will latter be recalled from the database. And ex. tabs
will be shown as nothing when I recall it. Besides that you can't tab in
the textarea because the cursor will moce to the next input field.
It is only used as a preview and if some very speciel thing is made in the
text like tabs and html charecters etc. the text will not be accepted by my
as admin anyway :o))

But I think i get it now...
The only thing I don't get is the \r and \n
What is the difference ?
\r is enter
and \n is linebreak ?
or...

isn't enter the same as a linebreak ? and why is it sometime \r\n and in
other cases just \n

[Bart Van der Donck]

EnjoyNews wrote:

[...]
The only thing I don't get is the \r and \n
What is the difference ?
\r is enter
and \n is linebreak ?
or...

isn't enter the same as a linebreak ? and why is it sometime \r\n and in
other cases just \n

'\r' was the historical end-of-line character of Apple/Mac, '\r\n' of
DOS/Windows, and '\n' Unicorum.

http://en.wikipedia.org/wiki/Newline
http://en.wikipedia.org/wiki/Carriage_return
http://en.wikipedia.org/wiki/Line_feed

RFC2368 is very implicit for HTTP:

| Also note that line breaks in the body of
| a message MUST be encoded with '%0D%0A'.

(%0D%0A = percent encoding for \r\n)

http://rfc.net/rfc2368.html

--
Bart

[Thomas 'PointedEars' Lahn]

GArlington wrote:

You need to replace all <cr><lf[text end-of-line] in textarea

User agents running on different operating systems use different code
sequences to define a line-break (which is *not* end-of-line). Usually
only WinDOS UAs use <CR><LF(0x0D 0x0A).

with <br/[HTML end-of-line]

It is a `br' element, it does not, again, mean end-of-line but line-break,
and in HTML it must be <br(else it's equivalent to <br>&gt;).
PointedEars

[Thomas 'PointedEars' Lahn]

[Quoting fixed]

EnjoyNews wrote:

"GArlington" [...] wrote:

>You need to replace all <cr><lf[text end-of-line] in textarea with
<br/[HTML end-of-line]

ok... so the line breaks is actually <cr><lfin a textarea ?

Or standalone <CR(Mac OS < 10.x) or <LF(*x).

But how do I replace this on the run in javascript ?

In your case,

document.getElementById('javao').innerHTML =
this.value.replace(/\r?\n|\r/g, "<br>");

is probably the most efficient solution. However, you should feature-test
the return value of the methods that you call before you use that as base
object of a reference, and, depending on how much you know about the
execution environment (usually one does not know anything about it), even
the method property before you call it.

This was a FAQ. Please search before you post.

<http://jibbering.com/faq/>
PointedEars

P.S.
Please trim your attribution lines to contain a minimum amount of duplicated
information, and use `>' to mark quotation levels or use a better user agent
that can do that by default. I can recommend Mozilla Thunderbird.
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

[Thomas 'PointedEars' Lahn]

Bart Van der Donck wrote:

[...]
RFC2368 is very implicit for HTTP:

| Also note that line breaks in the body of
| a message MUST be encoded with '%0D%0A'.

(%0D%0A = percent encoding for \r\n)

http://rfc.net/rfc2368.html

RFC2368 describes "The mailto URL scheme" and how newlines in an *e-mail*
message body must be encoded if they are to be defined in a URL using that
URI scheme. That definition corresponds with STD11/RFC(2)822, "Internet
Message Format" (which, incidentally, HTTP and even the Usenet article
format is based on.)

It has nothing to do with how a user agent encodes line-breaks put in by the
user, though.

Apropos, your signature delimiter is (still?) borken, it must be
`--<SP><CR><LF>'. I suggest not to use it with Google Groups's borken
interface that, like other borken UAs, among them earlier versions of
Outlook Express, removes all trailing space (<SP>) characters on submit.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>

[Bart Van der Donck]

Thomas 'PointedEars' Lahn wrote:

Bart Van der Donck wrote:

>[...]
RFC2368 is very implicit for HTTP:

>* | Also note that line breaks in the body of
* | a message MUST be encoded with '%0D%0A'.

>(%0D%0A = percent encoding for \r\n)
*http://rfc.net/rfc2368.html

RFC2368 describes "The mailto URL scheme" and how newlines in an *e-mail*
message body must be encoded if they are to be defined in a URL using that
URI scheme. *That definition corresponds with STD11/RFC(2)822, "Internet
Message Format" (which, incidentally, HTTP and even the Usenet article
format is based on.)

Yes, the correct source is actually RFC 2822 here. But it's always the
same easy rule: use \r\n.

It has nothing to do with how a user agent encodes line-breaks put in by the
user, though.

I was referring to http only: "RFC2368 is very implicit for HTTP...
etc"

Apropos, your signature delimiter is (still?) borken, it must be
'. *I suggest not to use it with Google Groups's borken
interface that, like other borken UAs, among them earlier versions of
Outlook Express, removes all trailing space (<SP>) characters on submit.

Wasn't aware of that. But I like Google Groups too much to switch to
something else. I've sent a request to them about it. Presumably some
day it will be fixed.

--
Bart

[Thomas 'PointedEars' Lahn]

Bart Van der Donck wrote:

Thomas 'PointedEars' Lahn wrote:

>Bart Van der Donck wrote:>>

>>[...]
RFC2368 is very implicit for HTTP:
| Also note that line breaks in the body of
| a message MUST be encoded with '%0D%0A'.
(%0D%0A = percent encoding for \r\n)
http://rfc.net/rfc2368.html

RFC2368 describes "The mailto URL scheme" and how newlines in an *e-mail*
message body must be encoded if they are to be defined in a URL using that
URI scheme. That definition corresponds with STD11/RFC(2)822, "Internet
Message Format" (which, incidentally, HTTP and even the Usenet article
format is based on.)

Yes, the correct source is actually RFC 2822 here. But it's always the
same easy rule: use \r\n.

Nonsense.

>It has nothing to do with how a user agent encodes line-breaks put in by the
user, though.

I was referring to http only: "RFC2368 is very implicit for HTTP...
etc"

RFC2368 has anything to do with HTTP.

>Apropos, your signature delimiter is (still?) borken, it must be
'. I suggest not to use it with Google Groups's borken

^^

>interface that, like other borken UAs, among them earlier versions of
Outlook Express, removes all trailing space (<SP>) characters on submit.

I did not write what you quoted. Is Google Groups this borken that it
removes "`--<SP><CR><LF>"? as well?

Wasn't aware of that. But I like Google Groups too much to switch to
something else. I've sent a request to them about it. Presumably some
day it will be fixed.

And until that day might come you are going to continue to bother your
readers with these flaws, to make *your* responsibility *their* burden?
I see.
Score adjusted

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[Thomas 'PointedEars' Lahn]

Bart Van der Donck wrote:

Thomas 'PointedEars' Lahn wrote:

>Bart Van der Donck wrote:

>>RFC2368 is very implicit for HTTP:

| Also note that line breaks in the body of
| a message MUST be encoded with '%0D%0A'.

(%0D%0A = percent encoding for \r\n)
http://rfc.net/rfc2368.html

RFC2368 describes "The mailto URL scheme" and how newlines in an
*e-mail* message body must be encoded if they are to be defined in
a URL using that URI scheme. That definition corresponds with
STD11/RFC(2)822, "Internet Message Format" (which, incidentally,
HTTP and even the Usenet article format is based on.)

Yes, the correct source is actually RFC 2822 here. But it's always the
same easy rule: use \r\n.

Nonsense.

>It has nothing to do with how a user agent encodes line-breaks put in
by the user, though.

I was referring to http only: "RFC2368 is very implicit for HTTP... etc"

RFC2368 has nothing to do with HTTP.

>Apropos, your signature delimiter is (still?) borken, it must be
'. I suggest not to use it with Google Groups's borken

^^

>interface that, like other borken UAs, among them earlier versions of
Outlook Express, removes all trailing space (<SP>) characters on submit.

(sic!)

I did not write what you quoted. Is Google Groups this borken that it
removes "`--<SP><CR><LF>"? as well?

Wasn't aware of that. But I like Google Groups too much to switch to
something else. I've sent a request to them about it. Presumably some day
it will be fixed.

And until that day might eventually come (experience tells it is unlikely
to) you are going to continue to bother your readers with these flaws caused
on your incompetence (for it is not that there are no better and as easy to
use alternatives), to make *your* responsibility *their* burden? I see.
Score adjusted

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16

[Bart Van der Donck]

Thomas 'PointedEars' Lahn wrote:

Bart Van der Donck wrote:

>Thomas 'PointedEars' Lahn wrote:

>>RFC2368 describes "The mailto URL scheme" and how newlines in an *e-mail*
message body must be encoded if they are to be defined in a URL using that
URI scheme. *That definition corresponds with STD11/RFC(2)822, "Internet
Message Format" (which, incidentally, HTTP and even the Usenet article
format is based on.)

>Yes, the correct source is actually RFC 2822 here. But it's always the
same easy rule: use \r\n.

Nonsense.

No. RFC 2616 removes all doubt:

| HTTP/1.1 defines the sequence CR LF as the end-of-line marker
| for all protocol elements except the entity-body (see appendix
| 19.3 for tolerant applications).

and

| When in canonical form, media subtypes of the "text" type use
| CRLF as the text line break. HTTP relaxes this requirement and
| allows the transport of text media with plain CR or LF alone
| representing a line break when it is done consistently for an
| entire entity-body.

For me it is obvious that text-types in the body of the transfer can
use anything they want, because HTTP must keep its hands from that.
HTTP must only offer the data exactly as they are. But this stands
apart from the HTTP-protocol itself, which is imperative about
newlines: use \r\n.

The main \r\n-rule was only relaxed to be sure that everything is
transmitted without touching it. But I think you can smell from the
text how recommended it is to use the canonical form with \r\n.

I did not write what you quoted. *Is Google Groups this borken that it
removes "`--<SP><CR><LF>"? as well?

It looks like that, yes. Try again with this article :-)

--
Bart