Convert from English Digits to Arabic ones in html

Question

I need to convert all English numbers that appear in a given HTML page to Arabic ones (to be independent from the user browser encoding). I prefer to use javascript or it will be great if this can be handled using CSS.

I found some pages doing this but I found that the Arabic letters are added with their ASCII representation in the source code. Does it mean that they are applying some sort of a java script function?

Any clue how can I do something like this?

Answer 1

To explain this comment:

Like in this link almasry-alyoum.com when I view the source of this page, I find that Indian letters are put in their ascii representation (i.e. ٢٣٧)

These are HTML character entities. The values are Unicode codepoints as defined by the documentation.

0660 ARABIC-INDIC DIGIT ZERO
0661 ARABIC-INDIC DIGIT ONE
0662 ARABIC-INDIC DIGIT TWO
0663 ARABIC-INDIC DIGIT THREE
0664 ARABIC-INDIC DIGIT FOUR
0665 ARABIC-INDIC DIGIT FIVE
0666 ARABIC-INDIC DIGIT SIX
0667 ARABIC-INDIC DIGIT SEVEN
0668 ARABIC-INDIC DIGIT EIGHT
0669 ARABIC-INDIC DIGIT NINE

So, ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ can be encoded as ٠ ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩ in a web page.

Note: &# for decimal values; &#x for hex.

Answer 2

How about a straight replace function?

String.prototype.toIndiaDigits= function(){
 var id= ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
 return this.replace(/[0-9]/g, function(w){
  return id[+w]
 });
}

// test

var S='The year 2009 has only 365 days';
alert(S.toIndiaDigits());

/*  returned value: (String)
The year ۲۰۰۹ has only ۳۶۵ days
*/

Answer 3

The "ASCII equivalents" you are referring to are not actually that at all.

First of all, ASCII is a 7-bit character encoding in which characters like Arabic-Indic Digit Two don't exist.

Secondly, what you are seeing are actually HTML Entities. To programmatically make a conversion from Latin numerals to these entities would require the exertion of a backend language like PHP, Perl, C#, etc.

Thirdly, the numeric value represented in the entities is their Unicode Code Point in decimal form. So ٢ is the Unicode character at code point 1634 (decimal) or 0662 (hex), which is the more standard notation.

Lastly, I like ferdley's approach, but the tricky part will figuring out how to use his algorithm to replace only the numbers you want, and not numbers that otherwise appear in the HTML source, such as the pixel-width of an image.

Answer 4

Convert English(Latin) digits to both Persian and Arabic digits.

//English to Persian digits.
String.prototype.toFa= function() {
  return this.replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d])
}

//English to Arabic digits.
String.prototype.toAr= function() {
  return this.replace(/\d/g, d =>  '٠١٢٣٤٥٦٧٨٩'[d])
}

//English to either Persian or Arabic digits.
String.prototype.toIn= function(e) {
  return this.replace(/\d/g, d => e ? '٠١٢٣٤٥٦٧٨٩'[d] : '۰۱۲۳۴۵۶۷۸۹'[d])
}

//English to Persian digits using unicode.
String.prototype.toFaUni= function() {
  return this.replace(/\d/g, d => String.fromCharCode('0x06F'+d))
}

//English to Arabic digits using unicode.
String.prototype.toArUni= function() {
  return this.replace(/\d/g, d => String.fromCharCode('0x066'+d))
}

//English to either Persian or Arabic digits.
String.prototype.toInUni= function(e) {
  return this.replace(/\d/g, d => String.fromCharCode('0x06'+(e ? '6':'F')+d))
}

//examples
let text = 'It is 30/08/2018 at 8:24 AM'

//using array
alert(text.toFa())
alert(text.toAr())
alert(text.toIn(0))
alert(text.toIn(1))

//using unicode
alert(text.toFaUni())
alert(text.toArUni())
alert(text.toInUni(0))
alert(text.toInUni(1))

jsfiddle

Answer 5

Thanks for the answers. No one has discussed handling decimal and thousand markers. See Wikipedia for example. According to this page, these are the correct unicode characters:

• U+066B - Arabic Decimal Separator
• U+066C - Arabic Thousands Separator

Answer 6

You will need to use JavaScript, but the procedure is quite straightforward. Assuming that the number you wish to convert is already in a string, then something like the following snippet of code will work:

function convertDigitIn(enDigit){ // PERSIAN, ARABIC, URDO
    var newValue="";
    for (var i=0;i<enDigit.length;i++)
    {
        var ch=enDigit.charCodeAt(i);
        if (ch>=48 && ch<=57)
        {
            // european digit range
            var newChar=ch+1584;
            newValue=newValue+String.fromCharCode(newChar);
        }
        else
            newValue=newValue+String.fromCharCode(ch);
    }
    return newValue;
}

The code isn't very pretty and can probably be written more efficiently, but essentially what it's doing is converting any char from "0" to "9" by adding an offset value to make the character value now be in the unicode range for the Indic digits. The Indic digits range from \u0660 to \u0669 hence the conversion from European to Indic digits is just simple maths.