javascript vaiable and arabic language issue

Question

When I hard code something like <h1>Some arabic word</h1> It displays correct words.

but when I update same <h1> By JQuery question marks are displayed. Remember my Arabic is stored in a JavaScript variable.

Any kind of help is appreciated.

CODE:

var arabic_dealer = "أنا";
$("#DealerDiv").html(arabic_dealer);

Answer 1

You need proper encoding:

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

… or use the HTML5 shorthand:

<meta charset='utf-8'>

Here's a encoding function for HTML Entities (source):

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

Consider reading about JavaScript's encoding functions via Google Search.

Answer 2

try adding tag:

var arabic_dealer = "أنا";
$("#DealerDiv").html("<h1>" + arabic_dealer + "</h1>");

Answer 3

Make sure your source (.js file or .html that you embed your script in) is properly encoded AND properly tagged with either header/meta for .html or encoding in <script> tag where you call .js file.

Also encoding all symbols above codepoint 127 as escapes can help you evade this issue completely. Some tools (like Google Closure Compiler) can do this for you automatically either as their direct purpose or side-effect.

var arabic_dealer = "\u0623\u0646\u0627";
$("#DealerDiv").html(arabic_dealer);