Javascript escaping madness

Lucian Sandor · Jul 30, 2004

Hello everyone,
While I'm a newbie here, I a not new to google, so please don't send
me back, it would be useless.
First of all I have to specify I am working on a Blogger.com template,
therefore anything I'll write should be stuck on a single file.
I thought about creating a funny pop-up.
<a href="javascript:myFunction();"...
that's because, as you will see, the code for the popup is pretty
complex.
I've insterted myFunction somewhere in the file.
First question: according to the w3c validator, the only way to
include complex script, including string variables with HTML tags in
them, is to insert HTML comments?
Then, I've started by building a window caled myPopup and then
myPopup.document.write("<html>");...
The second question: is there a recommended way to insert string
constants in inline scripts? (AFAIK single quotes were recommended,
w3c also choked on double quotes, Mozilla does not like double quotes
too)
Then we had something more complex: html tags with attributes. I had
managed to insert them using escaping character such as
myPopup.document.write(' <p style= \' align:top \' > ');
But next, on the popup I had to inject some fancy inline JS code.
Third question: how would I, following the document.write way, insert
in the popup a code like:
<a href="#" onclick="if(document.all){bResult =
window.clipboardData.setData('Text',document.selection.createRange().text;}">
or maybe
<a href='#' onclick='if(document.all){bResult =
window.clipboardData.setData("Text",document.selection.createRange().text;}'>
Fourth, is there any difference between the two previous anchors in
the way they are written? Is one of the two forms recomended?
(somehow, it is the same question with the first one)
As you can see, two types of quotes are needed, and they should be
written through document.write. Is that even possible?
TIA,
LS.

Michael Winter · Jul 31, 2004

Hello everyone,
While I'm a newbie here, I a not new to google, so please don't send
me back, it would be useless.
First of all I have to specify I am working on a Blogger.com template,
therefore anything I'll write should be stuck on a single file.
I thought about creating a funny pop-up.
<a href="javascript:myFunction();"...

Don't use this form. It causes several problems, not least of which
results in a page that is completely unusably by users that disable
JavaScript.

that's because, as you will see, the code for the popup is pretty
complex.
I've insterted myFunction somewhere in the file.
First question: according to the w3c validator, the only way to
include complex script, including string variables with HTML tags in
them, is to insert HTML comments?

This "error" is documented by the validator:

<URL:http://validator.w3.org/docs/help.html#faq-javascript>

Basically, the validator interprets "</" anywhere within the block as the
end of the SCRIPT element, even if the closing tag is not for a SCRIPT
element (browsers are allowed to do this!) When it examines the tag more
closely, it discovers that is not "</SCRIPT>" as it expects, hence the

end tag for element "..." which is not open

message. The solution, included in the validator's FAQ *and* the HTML
specification, is to escape the forward slash. That is, change

var myHTML = '<a href="myPage.html">Link</a>';

to

var myHTML = '<a href="myPage.html">Link<\/a>';

Whilst this has no effect on the script (in that regard, the lines are
identical), the HTML parser won't see "</".

Another solution is simply to remove the embedded script and place it in a
separate file.

Then, I've started by building a window caled myPopup and then
myPopup.document.write("<html>");...

It might be easier to create a skeleton HTML file, dynamically modifying
that, rather than creating it from scratch. Writing valid HTML (something
you should always endeavour to do) purely with document.write() calls is a
waste of time.

The second question: is there a recommended way to insert string
constants in inline scripts? (AFAIK single quotes were recommended,
w3c also choked on double quotes, Mozilla does not like double quotes
too)

You'll have to explain what you mean here. Define "insert string
constants" and your idea of "inline scripts". My notion of the latter is a
SCRIPT element with the code embedded, as opposed to a SCRIPT element with
the src attribute. Perhaps you mean intrinsic events? I'll assume that for
the moment.

If you need to include a double quote (") within a HTML attribute value,
you need to use entity references, just as you would with normal text:

<a onclick="myWin.document.write("Some text&quot

;return false">

To the JavaScript engine, this would be interpreted as:

myWin.document.write("Some text");return false

Then we had something more complex: html tags with attributes. I had
managed to insert them using escaping character such as
myPopup.document.write(' <p style= \' align:top \' > ');

Just covered that.

But next, on the popup I had to inject some fancy inline JS code.

Again, a shaky definition - "inline" - so I'll still assume intrinsic
events.

Third question: how would I, following the document.write way, insert
in the popup a code like:
<a href="#" onclick="if(document.all){bResult =
window.clipboardData.setData('Text',document.selection.createRange().text;}">
or maybe
<a href='#' onclick='if(document.all){bResult =
window.clipboardData.setData("Text",document.selection.createRange().text;}'>

I wouldn't recommend including such large amounts of code directly inside
an intrinsic event. You should limit the contents to a few simple
statements. Anything more complicated should be wrapped in a function. It
aids in debugging as you don't have to search a single, massive line. You
also avoid this whole debacle because there will be no nested strings
(they'll be in the SCRIPT block).

If you do want to persist, use entity references as I explained above.

Fourth, is there any difference between the two previous anchors in
the way they are written? Is one of the two forms recomended?
(somehow, it is the same question with the first one)
As you can see, two types of quotes are needed, and they should be
written through document.write. Is that even possible?

If you've taken my advice on board, these final questions shouldn't matter
anymore. However, I would stick to whatever format you use in your HTML.

Personally, I always use double quotes for HTML attributes, and single
quotes for JavaScript strings. This allows me to place double quotes
inside strings (which I do more often than apostrophes), and place strings
inside attribute values. That is:

'<a href="myPage.html">Link<\/a>'

and

onclick="showTitle('Introduction')"

If I needed to do both, you'd have to escape the internal double quotes as
character entities, irrespective of which quote type was outer- or
innermost.

Hope that helps,
Mike

Lucian Sandor · Jul 31, 2004

Michael Winter said:
Don't use this form. It causes several problems, not least of which
results in a page that is completely unusably by users that disable
JavaScript.

<URL:http://www.jibbering.com/faq/#FAQ4_24>

I am aware of this recommendation, but this is a Blogger.com specific
issue. I would be glad to separate JS, HTML and CSS files, but this
option isn't available.
.....

You'll have to explain what you mean here. Define "insert string
constants" and your idea of "inline scripts". My notion of the latter is a
SCRIPT element with the code embedded, as opposed to a SCRIPT element with
the src attribute. Perhaps you mean intrinsic events? I'll assume that for
the moment.

You are right, "inline" should be understood as scripts inserted in
the HTML file, as opposed to separate JS files.

If you need to include a double quote (") within a HTML attribute value,
you need to use entity references, just as you would with normal text:

<a onclick="myWin.document.write("Some text"return false">

To the JavaScript engine, this would be interpreted as:

myWin.document.write("Some text");return false

This is a good idea. I see already that the script is running already
in IE.

....

Hope that helps,
Mike

It helped indeed. Thank you.
Regards,
LS.

Thomas 'PointedEars' Lahn · Jul 31, 2004

Lucian said:
"Michael Winter" <[email protected]> wrote in message news:<opsby5bnqcx13kvk@atlantis>...

Please do not write attribution novels.

I am aware of this recommendation, but this is a Blogger.com specific
issue. I would be glad to separate JS, HTML and CSS files, but this
option isn't available.
....

You probably want

<script type="text/javascript">
document.write(
'<a href="#" onclick="myFunction(); return false">...<\/a>');
</script>

then.

This is a good idea. I see already that the script is running already
in IE.

You should include a non-empty "href" attribute as well. An "a" element
without both the "href" attribute and one of "id" or "name" is just
nothing -- no hyperlink, no anchor. There are user agents which will
ignore the event handler because of this. You should always test your
scripts/documents with more than one user agent. If it works in IE, it
is simply not enough, because IE makes gold of every sh*t.

PointedEars

Dr John Stockton · Aug 1, 2004

JRS: In article <[email protected]>, dated Sat, 31 Jul
2004 18:09:58, seen in Thomas 'PointedEars'

Lahn said:
5bnqcx13kvk@atlantis>...

Please do not write attribution novels.

Fewmets.

Read
http://www.ietf.org/internet-drafts/draft-ietf-usefor-article-13.txt
http://www.ietf.org/internet-drafts/draft-ietf-usefor-useage-00.txt
which indicate current thinking.

Lahn puts a naive degree of credence in a local document which is
without general authority, and in his own importance.

Randy Webb · Aug 1, 2004

Thomas 'PointedEars' Lahn babbled incoherently while quoting an
attribution line which included no extraneous information:

Please do not write attribution novels.

Please stop your whining about inconsequential things, it detracts from
what you actually do know.

escaping bookmarklet code	1	Nov 13, 2006
Neopets coding help	4	Sep 23, 2021
An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
DOCTYPE / background-image madness!	24	Jul 24, 2006
Help with code	0	Jun 12, 2022
Only one table shows up with the information	2	Mar 29, 2023
Help with my responsive home page	2	Dec 14, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

Javascript escaping madness

Lucian Sandor

Michael Winter

Lucian Sandor

Thomas 'PointedEars' Lahn

Dr John Stockton

Randy Webb

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads