I have input type number and need to convert the numbers from Arabic to English once user trying to write:

My wrong shut:

<input type="number" class="arabicNumbers">

Jquery(js) code:

function toEnglishNumber(strNum) {

   var ar = [
       '٠','١','٢','٣','٤','٥','٦','٧','٨','٩',' ','-','/','|','~','٫'
   ];

   var en = [
       '0','1','2','3','4','5','6','7','8','9','','','','','','.'
   ];

   var cache = strNum;

   for (var i = 0; i < 10; i++) {
       var regex_ar = new RegExp(ar[i], 'g');
       cache = cache.replace(regex_ar, en[i]);
   }
   return cache;
}

$(document).on('keyup', '.arabicNumbers', function() {

   toEnglishNumber($(this).val())

});

Any suggestions or slove?

I have input type number and need to convert the numbers from Arabic to English once user trying to write:

My wrong shut:

<input type="number" class="arabicNumbers">

Jquery(js) code:

function toEnglishNumber(strNum) {

   var ar = [
       '٠','١','٢','٣','٤','٥','٦','٧','٨','٩',' ','-','/','|','~','٫'
   ];

   var en = [
       '0','1','2','3','4','5','6','7','8','9','','','','','','.'
   ];

   var cache = strNum;

   for (var i = 0; i < 10; i++) {
       var regex_ar = new RegExp(ar[i], 'g');
       cache = cache.replace(regex_ar, en[i]);
   }
   return cache;
}

$(document).on('keyup', '.arabicNumbers', function() {

   toEnglishNumber($(this).val())

});

Any suggestions or slove?

• javascript
• jquery
• html

• @YevgenGorbunkov No! in Arabic keyboard we have ١٢٣٤٥٦٧٨٩ I need to convert these numbers into these 134567890 when the keyboard Arabic – user12855055 Commented Feb 28, 2020 at 13:43

5 Answers 5

Your replace algorithm itself work. (Although there is more elegant ways, as you can see in the different answers here).

But you have 2 problems:

1 - you take the input value on key up, but since you give the input type="number" - the arabic letters simply not been added to the input value, and you have nothing to replace. so you have to accept type="text" and then remove all non numeric letters (in the same shot with arabic replacement)

(You can also handle keyDown event and preventDefault if the event.key is not on of english or numreric characters, but in this case you will have a problem with ctrl+v that will be rejected)

2 - You return the replacement, but you not put it as the input value. You should do..

function toEnglishNumber(strNum) {
   var ar = '٠١٢٣٤٥٦٧٨٩'.split('');
   var en = '0123456789'.split('');
   strNum = strNum.replace(/[٠١٢٣٤٥٦٧٨٩]/g, x => en[ar.indexOf(x)]);
   strNum = strNum.replace(/[^\d]/g, '');
   return strNum;
}

$(document).on('keyup', '.arabicNumbers', function(e) {
   var val = toEnglishNumber($(this).val())
   $(this).val(val)
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="arabicNumbers"/>

I'm not quite sure about extra (non-numeric) characters purpose inside your dictionary, however, extending the following logic for arbitrary dictionary is not difficult:

const ar = [...'٠١٢٣٤٥٦٧٨٩'],
      en = [...'0123456789'],
      arToEn = s => s.replace(new RegExp(`[${ar.join('')}]`,'g'), m => en[ar.indexOf(m)])
      
console.log(arToEn('٢٣٤٥'))

You can do this using Unicode character and hexadecimal offsets like:

function toEnglishNumber(x) {
  return x.replace(/[\u0660-\u0669\u06f0-\u06f9]/g, c => c.charCodeAt(0) & 0xf);
}
console.log(toEnglishNumber('٠١٢٣٤٥٦٧٨٩'));

function replaceBulk( str, findArray, replaceArray ){
      var i, regex = [], map = {}; 
      for( i=0; i<findArray.length; i++ ){ 
        regex.push( findArray[i].replace(/([-[\]{}()*+?.\\^$|#,])/g,'\\$1') );
        map[findArray[i]] = replaceArray[i]; 
      }
      regex = regex.join('|');
      str = str.replace( new RegExp( regex, 'g' ), function(matched){
        return map[matched];
      });
      return str;
    }

    // Test:
    console.log( replaceBulk( "٦١", [
       '٠','١','٢','٣','٤','٥','٦','٧','٨','٩',' ','-','/','|','~','٫'
   ], [
       '0','1','2','3','4','5','6','7','8','9','','','','','','.'
   ] ) );

Reference : Replace multiple strings at once

Intl.NumberFormat('ar').format("123456789")
> "١٢٣٬٤٥٦٬٧٨٩" 

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat