CODEWITHSUNDEEP
javascriptcssasciiarabic
Sarah
Sarah

Reputation: 1417

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?

Upvotes: 26

Views: 35927

Answers (9)

P9Q
P9Q

Reputation: 343

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

Upvotes: 16

Arsalan Haider
Arsalan Haider

Reputation: 128

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;
        }

Upvotes: 1

mehrdad
mehrdad

Reputation: 161

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: "٢٬٥٠٠٬٠٠٠"

Upvotes: 13

Sos.
Sos.

Reputation: 967

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];
 });
};

Upvotes: 3

kennebec
kennebec

Reputation: 104760

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

Upvotes: 50

ferdley
ferdley

Reputation: 2992

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.

Upvotes: 14

Nic Cottrell
Nic Cottrell

Reputation: 9655

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

Upvotes: 5

McDowell
McDowell

Reputation: 108859

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.

Upvotes: 8

Peter Bailey
Peter Bailey

Reputation: 105868

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.

Upvotes: 1

Related Questions