Clever Geek Handbook

HTML objects that render differently in the browser

I've been looking into character encoding but now I'm a little confused.

In the below code in the console, I get the output as ' >

' and the browser renders it correctly as...

<div id="test">&gt;</div>
</body>
<script type="text/javascript">
x = document.getElementById("test").innerHTML;
console.log(x);
</script>

But if I use the object ' &weierp;

' instead of ' &gt;

' I get the output as output in the console, and in the browser.

What is the difference between both entities and why is it displayed separately on the console?

enter image description here

+3


source to share


1 answer


When you write an element to the console log, browsers apply HTML serialization as described in Section 8.3 Serializing HTML Fragments of the W3C HTML5 Specification. Escaping rules at the end of a sentence define:

  • Replace any occurrence of a character with &

    "string" &amp;

    ".

  • Replace any occurrences of U + 00A0 NO-BREAK SPACE with the string " &nbsp;

    ".

  • If the algorithm was invoked in attribute mode, replace any occurrences of "" by string "".

  • If the algorithm was not invoked in attribute mode, replace any occurrences of the " <

    " by line " &lt;

    " character, and any occurrences of the " >

    " by line " &gt;

    " character .



Thus, when writing the contents of an element to the log, ampersands and non-terminating spaces appear as character references, other characters as such. When the browser creates an internal representation, the DOM, from your HTML markup, it replaces the link with the &weierp;

actual "℘" character. A similar operation is performed with all symbolic links, including &gt;

, but the specified two characters are displayed as links, regardless of how they were presented in the original HTML file.

+2


source






More articles:


All Articles