4

We have some custom JS scripts to deal with tooltip which are put in a dom attribute (tooltip) when we render the page.

however when i try to retrieve this tooltips (displayed as divs) string javaScript seems to automatically unescape the attribute value. is this normal behavior? and is there a way to avoid this?

The problem i have is that <email@example.org> turn into (invalid) html.

example for reproduction:

<div tltip ="&lt;text&gt;" id="escaped" />
<div tltip ="<text>"id="notescaped" />

js: 

a  = document.getElementById("escaped").getAttribute("tooltip");
b  = document.getElementById("notescaped").getAttribute("tooltip");
a.match("<"); //returns true (unexpected)
a.match("<"); //returns true (expected)
a == b; // returns true (unexpected)

edit:

to clarify im trying to display a (div) tooltip where i would like to somehow read content such as: "<b> &lt;email@example.com&gt <\b>" from the dom and display it in a div where it should look like: "<email@example.org>"

pvgoddijn
  • 12,638
  • 15
  • 47
  • 56
  • 4
    I think the browser is doing this automatically when it parses the HTML and creates the DOM. – Felix Kling Jun 27 '12 at 10:43
  • You shouldn't really need the encoded characters. Just add the attribute value to the `
    ` as a text node, not using `innerHTML`.
     – millimoose Jun 27 '12 at 12:36
  • the problem is i dont want it as a text node i want the bold tags to work als bold, but i dont want to have a email address in brackets interpreted as (invalid html), this is why the email bracket are htlmEscaped in the attribute (and the bold tags not). my problem lies in that both the escaped and the unescaped brackets are treated the same. – pvgoddijn Jun 27 '12 at 13:36
  • i'm currently double escaping the emailaddress but this feels kinda hacky – pvgoddijn Jun 27 '12 at 13:37

1 Answers1

6

It's not JavaScript which "unescapes" the characters, but the HTML parser which decodes the entities. It's expected behaviour.

If it does not sound logical to you, tell me how you would put a double and a single quote in an attribute.

<div tltip=""'">          does not work.
<div tltip="&quot;'">     does work.
<div tltip='"&#39;'>      does work.
<div tltip="&quot;&#39;"> does work.

Regarding the edited question
You don't have to read the original source code. For instance:

<div tltip="&lt;b&gt;test&lt;/b&gt;" id="test"></div>

var output1 = document.getElementById('html');
var output2 = document.getElementById('plain');
var attrValue = document.getElementById('test').getAttribute('tltip');
output1.innerHTML = attrValue;
output2.textContent = attrValue;

Will render as:

Output 1: test
Output 2: <b>test</b>

textContent is not supported in old IE versions. A cross-browser compatible way is:

output2[document.textContent === null ? 'textContent' : 'innerText'] = attrValue;
// OR
output2.innerHTML = ''; // Empty contents
output2.appendChild(document.createTextNode(attrValue));

If you still want to decode the entities, then the following will work:

// <b> -> &lt;b&gt;
function decode(strHTML) {
    var tmp = document.createElement('div');
    tmp.appendChild(document.createTextNode(strHTML));
    return tmp.innerHTML;
}
Rob W
  • 341,306
  • 83
  • 791
  • 678