PDA

Click to See Complete Forum and Search --> : Textarea carriage returns to <br>

scottlyndon
September 4th, 2004, 10:47 AM
I am using a little bit of Javascript to Preview the contents of a textarea before the form is submitted. It opens a window and diaplsy the contents. This part works fine.

I need to convert carriage returns to html <br> line breaks. So if a user presses enter once in the textarea in the preview window it converts to one <br>, if there are two carriage returns it converts to two <br>'s.

The code currently converts any number of continuous carriage returns to just one line break.

For example, if the following is entered:

Line 1
Line 2

Line 3

It is currently showing in the preview window as follows:

Line1
Line2
Line3

Here is my code:

<script language="JavaScript">
function ShowPreview()
{
var PreviewWindow =
window.open("","Preview","width=400,height=250,scrollbars=yes,resizable=yes,status=0");

PreviewWindow.document.open();
PreviewWindow.document.writeln('<HTML><HEAD><TITLE>Preview Newsletter</TITLE></HEAD>');
PreviewWindow.document.writeln('<BODY>');
PreviewWindow.document.writeln('<font face="verdana" size="2"><b>Here what your newsletter body will look like:</b><br><br>');
PreviewWindow.document.writeln(document.SendForm.Body.value.replace(/\r/,"<br>"));
PreviewWindow.document.writeln('<br><br><a href="javascript:window.close()">Close Preview</a></font>');
PreviewWindow.document.writeln('</BODY></HTML>');
PreviewWindow.document.close();
}
</script>

I know it is something in the replace statement in this line:

PreviewWindow.document.writeln(document.SendForm.Body.value.replace(/\r/,"<br>"));

that is not correct. Anyone help me sort this? Ta.
f1shrman
September 5th, 2004, 12:18 PM
Looks like you are only replacing the first '\r' in the textarea - here is another way to replace all tha '\r' in the textarea.

Also for Mozilla based browsers you need to check for a '\n' instead of the '\r'.

I added a quick I.E. check - because, I believe I.E. actually uses the '\r\n' combination in the textarea.



<script language="JavaScript">
<!--
//
// Browser Detection - need to add other browser checks as well
//
IE4 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 4.")!=-1)) ? true : false;
IE5 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 5.")!=-1)) ? true : false;
IE6 = ((document.all)&&(navigator.appVersion.indexOf("MSIE 6.")!=-1)) ? true : false;

function ShowPreview()
{
var PreviewWindow =
window.open("","Preview","width=400,height=250,scrollbars=yes,resizable=yes,status=0");

// loop through the text area data replacing
// the return characters with <br>
var strTemp = document.SendForm.Body.value;
var strOut;
var cChar;

for( var i=0; i<strTemp.length; i++ )
{
cChar = strTemp.charAt(i);

// depending on the browser we need to
// do the proper replacement - need to add other
// browser checks as well
if(( IE4 ) || ( IE5 ) || ( IE6 ))
{
if( cChar == '\r' )
strOut += "<br>";
else
strOut += cChar;
}
else
{
if( cChar == '\n' )
strOut += "<br>";
else
strOut += cChar;
}
}

PreviewWindow.document.open();
PreviewWindow.document.writeln('<HTML><HEAD><TITLE>Preview Newsletter</TITLE></HEAD>');
PreviewWindow.document.writeln('<BODY>');
PreviewWindow.document.writeln('<font face="verdana" size="2"><b>Here what your newsletter body will look like:</b><br><br>');

// now display the formatted out put string
//PreviewWindow.document.writeln(document.SendForm.Body.value.replace(/\r/,"<br>"));
PreviewWindow.document.writeln( strOut );

PreviewWindow.document.writeln('<br><br><a href="javascript:window.close()">Close Preview</a></font>');
PreviewWindow.document.writeln('</BODY></HTML>');
PreviewWindow.document.close();
}
//-->
</script>


HTH
morrowasted
September 5th, 2004, 12:32 PM
If you have access to PHP on your server, you can just use the nifty nl2br() function :).