javascript - getAttribute("name") unescapes html? - Stack Overflow

admin管理员组

文章数量:1428258

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 protected]> 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 protected]&gt <\b>" from the dom and display it in a div where it should look like: "<[email protected]>"

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 protected]> 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 protected]&gt <\b>" from the dom and display it in a div where it should look like: "<[email protected]>"

• javascript
• html
• dom

Share Improve this question Follow edited Jun 27, 2012 at 11:43 pvgoddijn asked Jun 27, 2012 at 10:40 pvgoddijnpvgoddijn 12.9k1515 gold badges4949 silver badges5656 bronze badges 4

• 4 I think the browser is doing this automatically when it parses the HTML and creates the DOM. – Felix Kling Commented Jun 27, 2012 at 10:43
• You shouldn't really need the encoded characters. Just add the attribute value to the <div> as a text node, not using innerHTML. – millimoose Commented Jun 27, 2012 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 Commented Jun 27, 2012 at 13:36
• i'm currently double escaping the emailaddress but this feels kinda hacky – pvgoddijn Commented Jun 27, 2012 at 13:37

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 patible 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;
}

本文标签： javascriptgetAttribute(quotnamequot) unescapes htmlStack Overflow