'Convert from English Digits to Arabic ones in html page

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:[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:[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:[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
    
    console.log(Ar.ArtoEn())
    console.log(Pe.PetoEn())
    console.log(Pe.PetoAr())
    console.log(Ar.ArtoPe())
    console.log(PeAr.IntoEn())

    //using array
    console.log(En.EntoFa())
    console.log(En.EntoAr())
    console.log(En.EntoIn(0))
    console.log(En.EntoIn(1))
    
    //using unicode
    console.log(En.EntoFaUni())
    console.log(En.EntoArUni())
    console.log(En.EntoInUni(0))
    console.log(En.EntoInUni(1)) 

jsfiddle

Solution 4:[4]

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. &#1634;&#1635;&#1639;)

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 &#x0660; &#x0661; &#x0662; &#x0663; &#x0664; &#x0665; &#x0666; &#x0667; &#x0668; &#x0669; in a web page.

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

Solution 5:[5]

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 6:[6]

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

Solution 7:[7]

Edit for the first answer, convert English numbers to Arabic numbers:

String.prototype.toArabicDigits = function(){
var id = ['?','?','?','?','?','?','?','?','?','?'];
return this.replace(/[0-9]/g, function(w){
  return id[+w];
 });
};

Solution 8:[8]

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.

Solution 9:[9]

Give this JavaScript function a string number and it will help you in converting english to arabic

function GetArabicNumber(number) {
            var charIndex = 0;
            var NumericArabic = "";

            while (charIndex < number.length) {
                switch (number[(charIndex)]) {
                    case '.':
                        NumericArabic += ".";
                        break;

                    case '0':
                        NumericArabic += "?";
                        break;

                    case '1':
                        NumericArabic += "?";
                        break;

                    case '2':
                        NumericArabic += "?";
                        break;

                    case '3':
                        NumericArabic += "?";
                        break;

                    case '4':
                        NumericArabic += "?";
                        break;

                    case '5':
                        NumericArabic += "?";
                        break;

                    case '6':
                        NumericArabic += "?";
                        break;

                    case '7':
                        NumericArabic += "?";
                        break;

                    case '8':
                        NumericArabic += "?";
                        break;

                    case '9':
                        NumericArabic += "?";
                        break;

                    default:
                        NumericArabic += number[(charIndex)];
                        break;
                }

                charIndex++;
            }

            return NumericArabic;
        }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mehraban
Solution 2 Muntasim
Solution 3 Mohsen Alyafei
Solution 4 McDowell
Solution 5 mehrdad
Solution 6 Nic Cottrell
Solution 7 زياد
Solution 8 Peter Bailey
Solution 9 Arsalan Haider