-1

Our web application allows the user to submit rich text (with some whitelisted HTML tags) to our server. The client-side form uses CKEDITOR to capture the rich text.

Once the user submits their input, I need to retrieve the rich text on a separate page for rendering. The render has to happen dynamically. On document ready, I pull the server side value, create a div element, and dump the rich text into the innerHTML attribute of the div.

i.e. :

var container = document.createElement('div');
div.innerHTML = '{!server_side_value}'; // String interpolation to retrieve the user's input

The problem that the server-side rich text is stored with newline characters. When I attempt to assign the innerHTML attribute, I get the "Unexpected token ILLEGAL" error. I cannot assign the string to innerHTML, nor can I pass it as an argument to a function that strips the new line characters using RegEx. Both attempts result in the 'Unexpected Token' error.

My question is: is it impossible to massage the rich text value in JavaScript because it has new line characters? I am working on a 3rd party platform, so the details of how user input is stored are somewhat hidden in a black box. However, I think I can add a hook to pre-process the data before save. In either case, I am just curious what to do in JavaScript if the server-side string returned with newline characters.

EDIT: Here is the highlighted line in the console. The reason why I thought it had to do with the newline was because of the space between the first 'p' tag and starting of the second. I know JavaScript multiline strings must use the + operator for concatenation. Another SO user had a similar issue: Javascript: Unexpected Token ILLEGAL Error with appendChild()

var richText = '<p class="p1"><span class="s1">Here is some text.</span></p>

<p class="p1"><span class="s1">Here is some more text</span><br><br></p>';
Community
  • 1
  • 1
dgp
  • 953
  • 1
  • 8
  • 11
  • javascript doesn't care about the new lines. I highly doubt that your error is due to line breaks. Please post the value you're getting back from the server – Eonasdan Sep 11 '15 at 22:06
  • Could those who downvoted please comment on how to improve the question? I won't take it personally :) It's just that it's more helpful to understand what to improve. Thank you – dgp Sep 11 '15 at 22:06
  • View the source of the page? What do you see generated? – gen_Eric Sep 11 '15 at 22:07
  • Thanks @Eonasdan, Rocket Hazmat. I have posted what I get in the console with the attempted assignment of the server side value to the JavaScript variable. I should also add that the debugger's (Chrome) red 'x' appears right after the first closing 'p' tag. – dgp Sep 11 '15 at 22:15
  • @Eonasdan, JavaScript *does* care about new lines in strings. It's a syntax error. – Josh Beam Sep 11 '15 at 22:20
  • @JoshBeam yes, you're right **IF** he is stuffing a server side variable straight into a string block. By the time the server variable gets render it's putting the actual line feeds into the javascript. – Eonasdan Sep 11 '15 at 22:23
  • 1
    Lines can't break over more than one line Javascript, even when they're quoted strings. See [this answer](http://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript/23867090#23867090) for methods to modify the string you're placing. However, I would strongly recommend JSON.stringifying the string (which is not one of the "solutions" mentioned in that answer), which will handle your line breaks appropriately as text. Simply `JSON.parse()` it when you use it. – Jared Farrish Sep 11 '15 at 22:30

1 Answers1

1

If you're stuffing that exact thing into a js var then, yes it will care about the line feed. If you are getting it from the server via javascript, it shouldn't be an issue.

Since you didn't specify your server side language, I'll use an example with C#/Razor/MVC

var richText  = '@RichText' // this is going to fail

At this point, I would do @RichText.Replace("\r\n","") or something

Your regex function fails because it's still the server side variable that contains line breaks.

Eonasdan
  • 7,563
  • 8
  • 55
  • 82
  • Thanks @Eonasdan. Just to understand a bit further: when you say getting the value from the server via JavaScript, do you mean in a common data format like JSON? vs. retrieving the variable directly? – dgp Sep 11 '15 at 22:58