Appending HTML strings into Iframe causing syntax errors, what is the correct way to do this?

Question

What I am doing:

I am storing (MySQL) formatted text that is structured like this:

I'm Robert (I'm = I am)<br>You're in France (You're = You are)<br><br><strong></strong><span class="st">?</span> <b>I</b>'m Robert  <br>? Am Robert <del> <br></del><br>? <b>You</b>'re Robert <br>? Are Robert  <br><br>I'm = I am<br>You're = ___ ___?<br><br><br><br>

I am trying to retrieve this string from the database an then append it into a WYSIWYG editor like this.

function enableEditMode(){
            card_content.document.designMode = 'On';
            $('iframe[name=card_content]').contents().find('body').append("I'm Robert (I'm = I am)<br>You're in France (You're = You are)<br><br><strong></strong><span class="st">?</span> <b>I</b>'m Robert  <br>? Am Robert <del> <br></del><br>? <b>You</b>'re Robert <br>? Are Robert  <br><br>I'm = I am<br>You're = ___ ___?<br><br><br><br>");
}

I get the following error:

SyntaxError: missing ) after argument list

I assume this is because of the "" quotes causing issues.

Question:

How do I go about appending HTML into the DOM without encuring syntax errors like this?

You need to replace " in the string with \" so that its escaped. Exactly how you do that will depend on the server language you're using to get data from your SQL database — Rory McCrossan
– Rory McCrossan, Commented Apr 10, 2017 at 12:53
@REDEVI_ that won't work in this case as the quotes are within an attribute, not part of the HTML content. — Rory McCrossan
– Rory McCrossan, Commented Apr 10, 2017 at 12:56

Community · Accepted Answer · 2017-05-23 11:54:04Z

1

I think you need to escape single quote or double quotes:

function addslashes( str ) {
    return (str + '').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
}

from: Escaping Strings in JavaScript

Or you escape the string in server side and return the escaped string. Therefore, the result should be like this:

"this is a test, isn\'t it great! <span class=\"test\">Test</span>"

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 10, 2017 at 12:57

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jethro Hazelhurst Over a year ago

Cool, serverside worked for me... I was using PHP so I just wrapped my HTML in addslashes(). Thanks!

Der Vampyr · Accepted Answer · 2017-04-10 12:55:15Z

1

Just replace

class="st"

by

class='st'

should do the trick. I dont see more quote conflicts.

answered Apr 10, 2017 at 12:55

Der Vampyr

9511 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

Appending HTML strings into Iframe causing syntax errors, what is the correct way to do this?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related