Convert from English Digits to Arabic ones in html page

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?

Solution 1

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
*/

Solution 2

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.

Solution 3

Convert English <> Arabic <> Persian

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

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

//Arabic to English digits.
String.prototype.ArtoEn= function() {
  return this.replace(/[\u0660-\u0669]/g, 
    d => d.charCodeAt() - 1632)
}

//Persian to English digits.
String.prototype.PetoEn= function() {
  return this.replace(/[\u06F0-\u06F9]/g, 
    d => d.charCodeAt() - 1776)
}

//Persian to Arabic digits.
String.prototype.PetoAr= function() {
  return this.replace(/[\u06F0-\u06F9]/g, 
    d => '٠١٢٣٤٥٦٧٨٩'[d.charCodeAt() - 1776])
}

//Arabic to Persian digits.
String.prototype.ArtoPe= function() {
  return this.replace(/[\u0660-\u0669]/g, 
    d => '۰۱۲۳۴۵۶۷۸۹'[d.charCodeAt() - 1632])
}

//Both Persian and Arabic to English digits.
String.prototype.IntoEn= function() {
  return this.replace(/[\u06F0-\u06F9\u0660-\u0669]/g, 
    d => ((c=d.charCodeAt()) > 1775 ? c - 1776 : c - 1632))
}

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

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

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

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

//examples
let En = 'It is 30/08/2018 at 8:24 AM'
let Pe = 'It is ۳۰/۰۸/۲۰۱۹ at ۸:۲۴ AM'
let Ar = 'It is ٣٠/٠٨/٢٠١٩ at ٨:٢٤ AM'

let PeAr = 'It is ۳۰/۰۸/۲۰۱۹ at ۸:۲۴ | AM It is ٣٠/٠٨/٢٠١٩ at ٨:٢٤ AM'

//Persian <> Araibc <> English

alert(Ar.ArtoEn())
alert(Pe.PetoEn())
alert(Pe.PetoAr())
alert(Ar.ArtoPe())
alert(PeAr.IntoEn())

//using array
alert(En.EntoFa())
alert(En.EntoAr())
alert(En.EntoIn(0))
alert(En.EntoIn(1))

//using unicode
alert(En.EntoFaUni())
alert(En.EntoArUni())
alert(En.EntoInUni(0))
alert(En.EntoInUni(1)) 

jsfiddle

Solution 4

I know this is a very old post, but for other people coming here from google search that have same problem, there is a relatively new method called toLocaleString which converts Number types to your preferred number system glyphs:

(2500000).toLocaleString('ar-EG');
//outputs: "٢٬٥٠٠٬٠٠٠"

Solution 5

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.

View more solutions

Comments

[Peter Bailey]

This will work provided the HTML and/or JavaScript source files are encoded as UTF-8 or some other Unicode-compatible encoding.

[McDowell]

Related to this topic: stackoverflow.com/questions/1676460/…

[Sassan]

you can replace id=[... with id='۰۱۲۳۴۵۶۷۸۹'

[Ammar Samater]

what if I wanna convert an additional character, like '.' to ',' ?

[Mikkel]

while this may be a correct answer, it would be more valuable to other readers if you explained how it works

[TheEhsanSarshar]

what for arabic to english

[Tony M]

Confirmed this method works by running on a complex document and checking with a native Arabic speaker.

[Abdullah Salma]

I appreciate the code. To whom wants to change the numerals from Indian to Arabic change the if statement to if (ch>=1632 && ch<=1641) and inside the if statement change the plus sign to minus var newChar=ch-1584;

[A.Anvarbekov]

how to implement this in React.js?

[Mohsen Alyafei]

This method uses the country Egypt as the locale which is not necessary. Just use the locale ar followed by the numbering system (in this case Arabic Numbering System), like this (2500000).toLocaleString('ar-u-nu-arab');