jQuery input number convert Persian/Arabic numbers to English numbers

Question

I have a input field of type number. I want to accept Persian/Arabic numbers as well in this field. I wanted to convert these numbers to English using jQuery, but it seems I can't retrieve these values.

jQuery('input[type="number"]').on('input', function() {
    console.log(jQuery(this).val());
});

For non-English numbers val() is empty string. Is there any way to get the value of a number input field, if the value is not a English number?

UPDATE:

Persian numbers: ۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹

English numbers: 0 1 2 3 4 5 6 7 8 9

UPDATE2:

Looks like Firefox returns the correct val but Chrome returns empty string. So my question is applicable on Google Chrome.

Vladimir

Can you give us an example for a Persian/Arabic vs English numbers? Is it (XVI) vs 16 ? – Lantha

It works for me: jsfiddle.net/mmemg541 – Spur

@Spur Hmm... Looks like Firefox handles this pretty well. Chrome return empty string. – Vladimir

See this post. – Agreed

Answer 1

you can use this function:

function toEnglishNumber(strNum) {
        var pn = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"];
        var en = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
        var an = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
        var cache = strNum;
        for (var i = 0; i < 10; i++) {
            var regex_fa = new RegExp(pn[i], 'g');
            var regex_ar = new RegExp(an[i], 'g');
            cache = cache.replace(regex_fa, en[i]);
            cache = cache.replace(regex_ar, en[i]);
        }
        return cache;
    }

Jasmine

Answer 2

I Found this gist that present a good solution to resolve this problem.

add this function to your javascript code:

String.prototype.toEnDigit = function() {
    return this.replace(/[\u06F0-\u06F9]+/g, function(digit) {
        var ret = '';
        for (var i = 0, len = digit.length; i < len; i++) {
            ret += String.fromCharCode(digit.charCodeAt(i) - 1728);
        }

        return ret;
    });
};

and you can use like this:

jQuery('input[type="number"]').on('input', function() {
    var value = jQuery(this).val();
    console.log(value.toEnDigit());
});

Hypocycloid

Thanks. But the problem still exists. Google Chrome returns an empty string when you enter Persian numbers (۱, ۲, etc.). Open this fiddle in your Chrome: jsfiddle.net/dttd0zzb – Vladimir

Answer 3

you can use this jquery function to do that in best performance :

function toEnNumber(inputNumber2) {
    if (inputNumber2 == undefined) return '';
    var str = $.trim(inputNumber2.toString());
    if (str == "") return "";
    str = str.replace(/۰/g, '0');
    str = str.replace(/۱/g, '1');
    str = str.replace(/۲/g, '2');
    str = str.replace(/۳/g, '3');
    str = str.replace(/۴/g, '4');
    str = str.replace(/۵/g, '5');
    str = str.replace(/۶/g, '6');
    str = str.replace(/۷/g, '7');
    str = str.replace(/۸/g, '8');
    str = str.replace(/۹/g, '9');
    return str;
}

you just need pass a string to this function and get your expected result.

Welcome

Answer 4

try this

function PersianToNum(persiannumstr) {
    var num=0, c;
    for(var i=0; i < persiannumstr.length; i++)
        c = persiannumstr.charCodeAt(i);
        num += c-1776;
        num *= 10;
    }
    return num/10;
}

Patentee

Answer 5

let persianNumbers = ["۰","۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", ]
let res="";
let cx=""
let counter=0;
function myFunction(){
let c = document.getElementById("myInput").value;
let myArray  = c.split("")


for(var i=0;i<persianNumbers.length;i++)
{
    for(var j=0;j<=persianNumbers.length;j++)
    {
   
    if(myArray[i]==j)
    {
     
      res =   persianNumbers[j]
        console.log("persian",persianNumbers[j])
   
    }
   
    }
   
}
cx=cx.concat(res)
console.log("final value",cx)
}

 <div class="input-group mb-3">
            <input type="number" class="form-control"  id="myInput" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" oninput="myFunction()">
          </div>
          

Pigg