How does using `document.write('😀')` allow an emoji to be displayed in HTML when using UTF-8 character encoding?

This is an example HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>emoji</title>
</head>
<body>
    \ud83d\ude00
    <script>
        var string = '\ud83d\ude00';
        document.write(string);
        console.log(string);
    </script>
</body>
</html>

The unicode character '\ud83d\ude00' within the body tag doesn't display as an emoji but as a string. However, when using document.write() and console.log(), it appears as an emoji despite the UTF-8 charset in the document. Why does this happen?

Answer â„–1

When the UTF-8 is included in the meta header, it simply indicates how to interpret the text within the HTML response. It does not change the actual encoding of the DOM document itself.

The reason your string works is because a JavaScript string consists of UTF-16 code units. Therefore, when you define an emoji like '\ud83d\ude00' in JavaScript, it represents the emoji at that level. Using document.write then allows you to display that string within the live document, rather than referring back to the original source text in UTF-8.

To directly include the emoji in the document without using document.write, you can simply paste it into the document and ensure that your editor saves the file in UTF-8 format. By indicating UTF-8 as the encoding in your browser settings, your editor will output the correct UTF-8 sequence for the emoji.

Answer â„–2

Let's build upon T.J. Crowder's response, as I lack the required 50 rep to leave a comment.

In HTML, escaping is done by preceding with an ampersand (&) and following with a semicolon (;), unlike in Javascript where backslashes (\) are used for escaping.

If needed, you can utilize HTML numeric character references:

<div>decimal:  &#128512;</div>
<div>hex:      &#x1f600;</div>

For emoji HTML codes, you can refer to this site.

Disclaimer: I am not affiliated with the mentioned website.

Answer â„–3

One obvious explanation could be that there are no escape sequences in HTML text.

To make it work, using HTML entities should do the trick:

\ud83d\ude00
&#xd83d;&#xde00;
&#x1f600;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the comparison between actual pixels and text size in Internet Explorer?

Can you determine the actual font size in pixels corresponding to the following text size options in Internet Explorer? Largest Larger Medium Smaller Smallest In a web development project, I am looking to achieve a similar functionality to adjust the te ...

Enhancing Tooltips with JQuery Tools in an UpdatePanel

My issue involves using the JQuery Tools Tooltip Plugin () with tooltips that are refreshed in asp.net UpdatePanel controls. The problem arises when after adding tooltips to items, any partial postback from an UpdatePanel causes the tooltips to malfunction ...

Incorporate checkboxes within a dropdown menu using JavaScript

Is there a way to achieve something similar in pure JavaScript, without relying on jQuery? ...

Error encountered in Angular10: XHR request for POST failed due to browser blocking HTTP Request to a domain with a similar name

I am encountering an issue with my webpage that consists of a Django REST API and an Angular 10 Frontend SPA. Normally, I can successfully send GET, POST, PUT, and DELETE XHR Requests to my backend without any problems. However, there is a specific API End ...

React Material-UI Multiple Select with Checkboxes not displaying initial selections as checked

I am fairly new to working with React and MUI, so please bear with me. Currently, I am in the process of learning how to create Multiple Select Options with checkboxes by populating the Dropdown Options from an Array. Although I have set up the initial/de ...

Sending POST Requests with Next.js Version 14

How can I send a POST request using axios in Next.js 14, I prefer axios but fetch is also okay. I have been getting an AxiosError: Network Error when I try to use axios and TypeError: fetch failed when using fetch. However, it works fine with Postman. I ...

"How can I exclude empty fields from the form.serialize function in jQuery when using php?" is not functioning as expected

I am facing an issue with using How do I use jQuery's form.serialize but exclude empty fields. Despite following a minimal example that directs to a php script: <html><head> <script src="jquery.min.js"></script> <script typ ...

Is it possible for jQuery to analyze HTML contained within a variable?

Currently, I am utilizing PHP along with an ajax command to retrieve the complete HTML content from an external webpage using the file_get_contents() function in PHP. After storing this HTML in a JavaScript variable, I am curious if it is possible to uti ...

Encountering an error in Strapi project: URL undefined

I am currently in the process of setting up a Strapi application and getting it up and running. Following the instructions provided in this document: After successfully setting up Strapi and creating the application, I encountered an error when trying to ...

What could be causing the property of the object to be inaccessible in a ternary equation, yet functional in JSX in React?

I have an object that resembles the structure below: campground { "uri": "/campgrounds/long-island-bridge-campground-llc/", "acfDetails": { "picture": { "mediaItemUrl": "/uploads/2021/04/ ...

Passing data from a method callback to a function and returning a variable in the same function

Is there a way to properly return the latlon variable from the codeAddress function? The typical 'return latlon' doesn't seem to work, possibly due to scope issues. Any suggestions on how to resolve this? function codeAddress(addr) { ...

Stacking sheets of hole-punched paper on top of one another, create a visually captivating

I am in search of a way to create those distinctive black dots with papers displayed here: body { background: linear-gradient(#ccc, #fff); font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba ...

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

Encoding in UTF-8 using JSON with PHP

Facing Turkish character issue with PHP 5.4 version. PHP page <?php mysql_connect("127.0.0.1","android_project","mypassword"); mysql_select_db("android_project"); mysql_query("SET NAMES 'utf8_turkish_ci'"); $q=mysql_query("SELECT * FROM pro ...

JavaScript: Opening selected values in a new page with window.location

I've tried implementing your solution as suggested, but unfortunately, it's still not functioning. Do you have any other ideas? Thank you. code open_links() { var options = document.querySelectorAll('#dwl option'); for( var i = 0 ; ...

Modify the colors of the chartist fill and stroke using JavaScript

Struggling to dynamically set colors in a chartist graph using JavaScript. How can custom colors be applied through JS? The attempted method below is not successfully changing the color for the showArea in the chartist graph. <!doctype html> <htm ...

Complex recurrent operation

Can anyone assist me in solving this complex loop? I need to call 5 API URLs, each a specific number of times before moving on to the next URL in sequence and then starting over again. https://www.example1.com should be called 4 times https://www.example2 ...

Tips on preserving a dynamic web page within a Cordova application

I have developed a project and To Do list App that operates on a single HTML page with just an "add To Do list" button. Users can click on this button to create a To Do list and add tasks within it, all of which are dynamically generated as HTML elements. ...

Is there a way to transfer a JSON array from a text/javascript block to a runat=server block within the context of ExactTarget/Salesforce Marketing Cloud?

I have a page containing two <script> elements: one is running locally and the other one is running on the ExactTarget server: <script type="text/javascript"> var results = localStorage.getItem('results'); var results = JSON.parse(re ...

React: issue with updating state object property

I am encountering an issue while trying to update my state. When I check the updated state value in the console, it shows that the state value is undefined. Can someone please assist me in resolving this problem? I am utilizing the rc-time-picker to select ...