Alt attribute encoding with JavaScript

Question 1

Html entities must be encoded in alt attribute of an image in HTML page. So

<img id="formula" alt="A &rarr; B" src="formula.png" />

will work well.

On the other hand, the same JavaScript code will not work

document.getElementById('formula').alt = 'A &rarr; B';

and will produce A → B instead of A → B.

How to do it through JavaScript, when it is not possible to put the special (unencoded) characters in the source code?

Question 2

Google peoples - see also: stackoverflow.com/questions/94037/…

Question 3

JavaScript has its own system for escaping special characters in strings:

document.getElementById('formula').alt = 'A \u2192 B';

Question 4

+1. When you are assigning DOM properties, you don't need HTML-encoding. If you want the character → just paste it in; it's perfectly valid to say img.alt= 'A → B';. That only requires you to get the encoding you're saving your page as to match what you're serving it as (best: use UTF-8 for both). The JavaScript string literal escape 'A \u2192 B' is a good fallback if you can't rely on non-ASCII characters being served properly.

Question 5

@bobince: That was my first answer, too, but the question explicitly states: "How to do it through JavaScript, when it is not possible to put the special (unencoded) characters in the source code?" Moreover, this solution presupposes the source is a Unicode value, but the question's example uses an HTML entity. Oh, and really, no offence meant, I'm just wondering what to do in such a situation.

Question 6

Yeah, my feeling is there's a common assumption that non-ASCII characters need escaping which is much less often true than people think. (Indeed, the phrase 'special characters' is itself a misnomer when we're talking about 99.9% of all characters...) In any case there will be no difference between setting innerHTML to &#rarr; or → because all HTML parsers replace entity references with their text equivalent: you never get a DOM EntityReference node.

Question 7

@bobince: I think it would be great if authors could comfortably include any character in a document, but I've seen way too many encoding fails to recommend it, and I'd only do it myself if I had control over the website, server, VCS, and editors used by the developers. "Special characters" means every character that's at risk for being broken by bad encoding, everything but the ASCII 95.

Question 8

Here's an alternative if you can't save your file using a Unicode format:

function decodeHTML(str) {
 return str.replace(/&#(\d+);?/g, function() {
 return String.fromCharCode(arguments[1])
 });
}

However, this requires you to use the numeric representation. In this case →.

Question 9

IMHO you've suggested the easiest workaround. Even if it is a workaround, and not an answer, I accept it and that's the solution I will use for my code (converting entities like ↑ to ↑ on server side).

Question 10

I hate to be that guy, but please take a look at my answer.

Question 11

@Sidnicious No please, your solution is the best IMO! +1 from me! @MainMa feel free to accept his answer instead. I'd go for it :)

Question 12

@Sidnicious: well, it may be an alternative solution. Both are good, I think, so I uprated yours, still letting the answer of jweyrich as accepted, because it seems more straightforward, and does not require to use JavaScript character codes (different from HTML codes).

Question 13

JavaScript string literal escapes are in hex, like → escapes in HTML. If you really want to use the decimal codes you can: 'A '+String.fromCharCode(8594)+' B'.

Question 14

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Decode HTML entities using JavaScript</title>
 </head>
 <body>
 <img id="formula" src="vote-arrow-up-on.png" alt="A &rarr; C">
 <script>
 function html_entity_decode(str) {
 var p = document.createElement("p");
 p.innerHTML = str.replace(/</g,"&lt;").replace(/>/g,"&gt;");
 return p.innerHTML;
 }
 var theValue = html_entity_decode('A &rarr; B');
 document.getElementById('formula').title = theValue;
 </script>
 </body>
</html>

Credits to The JavaScript Source.

EDIT: I changed the original code to only use innerHTML on a <p> element, instead of innerHTML and value of a <textarea>.

Question 15

@jweyrich: it's easier to see the effect using the title attribute ;)

Question 16

Setting the HTML of a textarea should not change its form field value according to the standard DOM; the contained HTML maps to the textarea's defaultValue property, not value. It's a browser quirk that innerHTML also affects value, and it doesn't happen in Opera. Don't rely on it. You could write innerHTML to any other element and read the text node child it ends up with (if non-blank string). Also, avoid setAttribute, which is unnecessary in HTML documents, and buggy in IE.

Question 17

IE<8 treats el.getAttribute(someattr)/el.setAttribute(someattr, ...)) as being the same as property access, el[someattr]. Consequently, (1) any property whose value isn't a string will expose something that isn't a string. For integer properties you sometimes don't notice as weak typing hides it from you, but booleans, event handler functions and style will often trip you up. (2) any property whose name is different from the corresponding attribute will fail. That's htmlFor, className, and any attribute name made from multiple or hyphenated words.

Question 18

(3) any property which has a different meaning to its attribute will behave strangely. For example href will return the full resolved URL in a link, not the original, possibly-relative version that was actually used in the attribute value, and value returns a form field's current value, and not the content of the value attribute (which actually maps to defaultValue). Also (4) custom-attributes can shadow real properties, so writing <div nodeType="3"> might confuse a script into thinking it's a text node.

Question 19

(This is another reason custom attributes should be avoided, but if you must use them then yes, you must use getAttribute exclusively to access them, and if you've got any sense you'll limit this use to attributes prefixed data-.)

Question 20

In that particular case, you don't have encode special HTML characters in JavaScript.

The W3C validator should not complain about this (just tested it) and the document should validate. If not post your code and I'll update my answer.

Question 21

Fair point, but he didn't mention which file format he's using to save it.

s4y 51.9k12 gold badges73 silver badges98 bronze badges · Accepted Answer · 2010-05-05 18:02:24Z

8

JavaScript has its own system for escaping special characters in strings:

document.getElementById('formula').alt = 'A \u2192 B';

Share

Improve this answer

answered May 5, 2010 at 18:02

s4y's user avatar

s4y

51.9k12 gold badges73 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bobince

bobince Over a year ago

+1. When you are assigning DOM properties, you don't need HTML-encoding. If you want the character → just paste it in; it's perfectly valid to say img.alt= 'A → B';. That only requires you to get the encoding you're saving your page as to match what you're serving it as (best: use UTF-8 for both). The JavaScript string literal escape 'A \u2192 B' is a good fallback if you can't rely on non-ASCII characters being served properly.

2010年05月05日T19:16:18.35Z+00:00

Marcel Korpel

Marcel Korpel Over a year ago

@bobince: That was my first answer, too, but the question explicitly states: "How to do it through JavaScript, when it is not possible to put the special (unencoded) characters in the source code?" Moreover, this solution presupposes the source is a Unicode value, but the question's example uses an HTML entity. Oh, and really, no offence meant, I'm just wondering what to do in such a situation.

2010年05月05日T22:45:02.76Z+00:00

bobince

bobince Over a year ago

Yeah, my feeling is there's a common assumption that non-ASCII characters need escaping which is much less often true than people think. (Indeed, the phrase 'special characters' is itself a misnomer when we're talking about 99.9% of all characters...) In any case there will be no difference between setting innerHTML to &#rarr; or → because all HTML parsers replace entity references with their text equivalent: you never get a DOM EntityReference node.

2010年05月06日T14:06:14.987Z+00:00

s4y

s4y Over a year ago

@bobince: I think it would be great if authors could comfortably include any character in a document, but I've seen way too many encoding fails to recommend it, and I'd only do it myself if I had control over the website, server, VCS, and editors used by the developers. "Special characters" means every character that's at risk for being broken by bad encoding, everything but the ASCII 95.

2010年05月06日T15:57:39.97Z+00:00

CollectivesTM on Stack Overflow

Alt attribute encoding with JavaScript

4 Answers 4

4 Comments

6 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

4 Comments

6 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related