getAttribute（“ name”）是否转义html？

Question

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> "

Answer 1

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:
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;
}