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, Apr 10 '17 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, Apr 10 '17 at 12:56

score 1 · Answer 1 · answered Apr 10 '17 at 12:55

1

Just replace

class="st"

by

class='st'

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

answered Apr 10 '17 at 12:55

Der Vampyr

941
1
7
13

score 1 · Accepted Answer · edited May 23 '17 at 11:54

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 '17 at 11:54

Community

1
1

answered Apr 10 '17 at 12:57

Radonirina Maminiaina

6,958
4
33
60

Cool, serverside worked for me... I was using PHP so I just wrapped my HTML in `addslashes()`. Thanks! – Jethro Hazelhurst Apr 10 '17 at 13:02

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

2 Answers2