JavaScript function, pass HTML as parameter

Question

I have two functions in my script, one that outputs some long HTML string, the other one that takes this string as a parameter and processes it.

function myFirstFunction() {
    //output some HTML
    return myHTML;
}

var myHTML = myFirstFunction();

function mySecondFunction(myHTML) {
    //do something with parameter
}

For some reason that I can't figure out, the Chrome JS Console keeps giving me the following error: "Uncaught SyntaxError: Unexpected token <"

I thought maybe that was due to the fact, that the outputed HTML was pretty long since it seems to be working with small chunks of HTML. Any thoughts? Thx!

@ sachleen "myHTML" is some long HTML output. @ mcpDESIGNS yes it does work with short HTML strings. @ Santiago Elvira Ramirez thanks, I'm looking at this answer right now, but it seems that the other person had her script working fine in Firefox, this is not my case. — sf89
– sf89, Commented Sep 19, 2012 at 18:35

sachleen · Accepted Answer · 2012-09-19 18:36:54Z

2

Here's problem:

myHTML is a HTML string like this:

var myHTML ="<div id="foo"><div id='hello'>hello</div><div id="bar">bar'asdf'asf"sdf"&soidf;</div></div>";

That won't work because you have quotes and stuff inside it that are NOT escaped.

If you used innerHTML to get the HTML of an element on the page, this wouldn't be a problem.

answered Sep 19, 2012 at 18:36

sachleen

31.2k8 gold badges82 silver badges75 bronze badges

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

2 Comments

sf89 Over a year ago

Is there a way I can escape them? I don't see how I can use innerHTML to serve that purpose... thanks for your help

rxgx Over a year ago

@sf89 add slashes before the quotes to escape them from normal code; example: var html = "<div class=\"container\"></div>";

Santiago Elvira Ramirez · Accepted Answer · 2012-09-19 18:32:30Z

1

myHTML is constructed with some < or > extra so verify the html string

answered Sep 19, 2012 at 18:32

Santiago Elvira Ramirez

1,1918 silver badges28 bronze badges

3 Comments

sf89 Over a year ago

I have, and really can't see extra "<"... Is there a tool that could double check for me?

Santiago Elvira Ramirez Over a year ago

open one new html file and copy there the html then you check it

sf89 Over a year ago

thanks! I tried it, but it seems my html is clean so the error doesn't might not come from it

user964409 · Accepted Answer · 2012-12-21 16:59:02Z

There is a way to pass an html text as a parameter to javascript function: Just replace all specifics chars in html tag before you pass it to javascript function. Later in javascript you just revert all specific chars back to normal. The trick is to cause javascript recognizes only those chars it excepted.

Example:

[[C#]]

string urlString = "http://localhost:8698/DotNetNuke_Community_06.02.01_Install/Default.aspx?TabID=157&categoryId=92&newCategoryId=92";

                urlString = urlString.Replace("<", "µ");
                urlString = urlString.Replace(">", "Ħ");
                urlString = urlString.Replace("&", "€");
                urlString = urlString.Replace(":", "¥");
                urlString = urlString.Replace("=", "¬");
                urlString = urlString.Replace("/", "ä");
                urlString = urlString.Replace("?", "¿");
                urlString = urlString.Replace("'", "ʅ");
function(urlString);

[[Javascript]]

function(urlString){
urlString = urlString.replace(/µ/g, "<");
        urlString = urlString.replace(/Ħ/g, ">");
        urlString = urlString.replace(/€/g, "&");
        urlString = urlString.replace(/¥/g, ":");
        urlString = urlString.replace(/¬/g, "=");
        urlString = urlString.replace(/ä/g, "/");
        urlString = urlString.replace(/¿/g, "?");
        urlString = urlString.replace(/ʅ/g, "'");
}

Regards,

saml · Accepted Answer · 2012-09-19 18:37:07Z

-1

I'm assuming that you're literally trying to pass html, not in a string literal. If you try something like:

myFunction(<html><body>...);

That'll definitely through an error. You need to use string literals:

myFunction("<html><body>...");

If you're using html that has quotes in it, you need to escape them or use single quotes:

"<div id="name">"

is not a valid string. Make it either:

"<div id=\"name\">" or
'<div id="name">'

answered Sep 19, 2012 at 18:37

saml

6,8321 gold badge37 silver badges31 bronze badges

5 Comments

sf89 Over a year ago

This is an ajax context. So I have: <?php header("Content-type: text/javascript"); ?> var string = "<?php echo $myHTML ?>"; receiveMessage(string); As you can see, I am putting quotes as I think they should be. Or is it wrong?

saml Over a year ago

I don't know what the contents of $myHTML, so I have literally no idea what needs to be escaped. Can you just post what the contents of $myHTML are as it exists on the PHP side? You may need to escape it on the php side

sf89 Over a year ago

Output of the function on the php side: echo '<div class="box_img"> <img src="myLogo.png"/> </div> <div class="new_box"> <div class="triangle_left_2"></div> <div class="triangle_left_1"></div> <div class="username">USER</div> <div class="rt-button"> <a href="twitter.com/share" class="twitter-share-button" data-count="none" data-lang="en" data-text="'.$a_first_var.'">ReTweet</a> </div> <div class="txt_item"><p>'.utf8_decode($some_var).'</p></div> </div>';

saml Over a year ago

Try wrapping that call to utf8_decode() in htmlspecialchars()

sf89 Over a year ago

I just tried that, but it's throwing me "Uncaught SyntaxError: Unexpected token & "

Collectives™ on Stack Overflow

JavaScript function, pass HTML as parameter

4 Answers 4

2 Comments

3 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related