Javascript quotes inside quotes, string literal

Question

I am trying to display text in javascript tooltip

I keep getting inexhaustible string literals, though: a) quotes are shortened, b) there are no line breaks

The text I'm trying to display is as follows:

"No, we can't. This is going to be terrible." 

(his quote is from a person, and I want these quotes to appear in the tooltip)

My hint function works as follows

 onMouseOver="Tip('string here')" 

After running a line through my cleanup function for javascript

 function jschars($str) { echo preg_replace("/\r?\n/", "\\n", addslashes($str)); } 

In HTML it looks like this:

 onMouseOver="Tip('\"No, we can\'t. This is going to be terrible.\"')" 

This gives me an error message with an inexhaustible string for the first \ in Tip ('\

I guess, because I'm trying to put quotes directly in single quotes, how can I get around this for situations like this? (I tried htmlspecial chars, for example, replacing "with" and "quot;", I still get the error message

Answer 1

This is because you add double quotes inside the value of an XML element (or html):

 <div onMouseOver="Tip('\"....... 

backslash does not escape the xml / html context. Technically, you will need an entity-encoded string (after you javascript-convince it). Something like that:

 <div onMouseOver="Tip('\&quot;No, we can\'t. This is going to be terrible.\&quot;')" > 

Different browsers may or may not handle this properly. A much better way to approach it is to provide an id element (or a class or some other way to select it), and then add a mouse over the handler from a stand-alone script.

Answer 2

Due to the structure of what you are doing:

 onMouseOver="Tip('string here')" 

... you need to do two :

• As Lekenstein said, you need to use htmlspecialchars to turn any special HTML characters into escape characters. It does things like turn " in " which means you can safely enclose an attribute in characters. "

• But you are not just using this as an attribute, you are also putting it in a string literal, which means that you also need to do JavaScript escaping in the string. Otherwise (in your case) a single character ' or backslash will ruin the string. So your jschars function jschars also (in order) A) Convert \ to \\ , B) Convert ' to \' . Anyway, this is the minimum, you really need to thoroughly "make it safe to use inside the JavaScript literal." From your question, I had the impression that you did it manually, but it’s better to automate it for consistency.

Off topic . Separately, I would recommend not using attributes to attach handlers. Instead, browse to attachEvent (IE) and addEventListener (W3C), or better yet, browse a library like jQuery , Closure , Prototype , YUI, or any of several others that will smooth you out. For example, binding a mouse handler to:

You can use this handler to handle the mouse pointer:

 function handler() { Tip('Your message here'); } 

... which you then connect, like this, to the raw DOM materials (obviously, you will make a utility function for this):

 var div = document.getElementById('foo'); if (div.attachEvent) { // Uses "onmouseover", not "mouseover" div.attachEvent('onmouseover', handler); } else if (div.addEventListener) { // Uses "mouseover", not "onmouseover" div.attachEvent('mouseover', handler, false); } else { // Fallback to old DOM0 stuff div.onmouseover = handler; } 

Here's how Prototype simplifies this connection process:

 $('foo').observe('mouseover', handler); 

Here's how jQuery works:

 $('#foo').mouseover(handler); 

Answer 3

For this purpose you should use htmlspecialchars() . The problem is that "but HTML will not understand javascript quoting, so it stops at \" .

 function jschars($str) { echo htmlspecialchars(preg_replace("/\r?\n/", "\\n", $str), ENT_QUOTES); } 

Answer 4

You can save the string in javascript instead of HTML. eg:

 <a onmouseover="Tip(this, 123)">choice</a> 

Then something like:

 var texts = { 123:"No, we can't. This is going to be terrible.", ... }; function Tip(elm, txtId){ showTip(elm, texts[txtid]; }