Javascript line break rendering confusion
This is something that I know I will forget each time I run into it, so it's going up here for reference!
I use Javascript a fair bit, not as an advanced user but for everyday things like validation and moderate UI dynamic modifications. I was recently returning a string value from a remote ColdFusion function directly to a Javascript callback function then displaying it via alert() to the user. The string I returned contained "\n" characters in it so that I could control where the line breaks were to be when the alert function displayed it in a pop-up. What I wasn't counting on was that javascript would ignore these line breaks and simply display the "\n" string along with the rest of the message in one clump of characters all on a single line!
I figure, and please correct me if I am wrong, that since the string was created by ColdFusion as just that, a string, Javascript is not recognising the line breaks. If however, I was to create the exact same string in Javascript containing the same "\n" characters, it would indeed render correctly placing the line breaks where they have been indicated. Javascript seems to escape the \n values in the string passed by ColdFusion (like so: "\\n") and therefore negates the line break values.
Example:
ColdFusion returns the string: "Line one\nLine two\nLine three" and I would expect this to appear in an alert popup box as:
Line one
Line two
Line three
However the Javascript alert instead displays it as:
Line one\nLine two\nLine three
To fix this I had to use a Javascript global replace fucntion on the escaped characters in the string:
var newString = returnedString.replace(/\\n/g, '\n');
alert(newString);
Note that you have to use the "g" value in the above replace line. It stands for global - this way you replace all instances in the string and not just the first.
And that's that.
 |
Javascript line break rendering confusion
Comments
Steve wrote on 03/01/10 11:55 AM
Thanks Dan, I was not aware of that function actually! I'll have a go with it later to see what it does and if it helps.
Ben Nadel wrote on 03/01/10 1:50 PM
@Dan,I think he's actually trying to go the other way - he doesn't want to escape the string (as jsStringFormat() would do).
@Steve,
How are you returning the string from the server? It might be something in your API that is doing that. If you are using SerializeJSON(), it would escape existing slashes in the string (I think).
Steve wrote on 03/01/10 9:35 PM
@Dan,@Ben:Thanks for the comments guys, and yeah, the jsStringFormat() isn't what I was looking for unfortunately.
@Ben:
What I was doing was for a super simple small web site. I was just using a CFC function to validate a form submission and return a "success" string or an "error" string containing the fields that failed validation. The string was created just using CFSET and the list of fields divided by "\n". Not really what I'd usually do but all this particular website needed.
A JS function posted the form to the CF function and the return string from the CF function was handled by a JS callback function: using alert() to display the return string.
The fix I put in place works well though.
Dan G. Switzer, II wrote on 03/02/10 5:12 AM
@Steve:Are you calling the CFC directly from JS? If so, then the returned value is going to be doing the same thing as the jsStringFormat() function. Instead of using the \n to deliminate the string, you should just use chr(10) and CF will automatically escape the string for you.
The bottom line is if CF is escaping your code to actually display the \n it's because it's automatically escaping the output for you. So instead of using \n, just use a new line in you output and have CF convert it to \n.
Steve wrote on 03/04/10 2:25 PM
@DanThanks I am calling the function from Javascript and you were right. Scenarios:
1. Return a string with \n in it
2. Use \n in the return string and use jsStringFormat() before returning it
... both of these return a string and JS displays the \n.
Instead, I tried just returning the string from CF with chr(10) instead of \n and it worked fine. Thanks for the comments guys.
Dan G. Switzer, II wrote on 03/01/10 8:30 AM
Are you sure you're not using jsStringFormat()? If you're using jsStringFormat() then it's going to escape the string to show correctly. This means if you're manually escaping information the newline characters, jsStringFormat() will escape the \n to \\n.If you use jsStringFormat() there should be no need to transform a newline to \n as CF will handle it for you.