Convert English numbers to Persian/Arabic only for a specified div

Question

I know this question has been replied many times here, but I still haven't got an exact answer.. I need to convert English letters to Persian/Arabic letters by some javascript, but not for the entire page, but only for a div or more. like only for a specific class.

I have come across these codes, but don't know which one are the best to use.

function convert($string) {
    $persian = array('۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹');
    $num = range(0, 9);
    return str_replace($persian, $num, $string);
}

I need exact that source to implement only on one div-class.

For example:

<div class="demo">12345</div> 

should change to

<div class="demo">۱۲۳۴۵</div>

Answer 1

I don't believe either of the code samples you provided are JavaScript, the first is close syntactically, but is missing the range() method and new on the array() definition. The second is Java.

To achieve what you require you could convert the text of each of the HTML elements you want to translate to an array and step through them, checking each character via Regex to see if a number was found. If it was, you can do a simple replacement before joining the array back together. Something like this:

var arabicNumbers = ['۰', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
$('.translate').text(function(i, v) {
  var chars = v.split('');
  for (var i = 0; i < chars.length; i++) {
    if (/\d/.test(chars[i])) {
      chars[i] = arabicNumbers[chars[i]];
    }
  }
  return chars.join('');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="translate">Dummy text with some 123 numbers in 390981 it.</div>
<div class="translate">Dummy text with some 67898 numbers in 109209734.09 it.</div>

---

Update - 2020-03

Here's a shorter version of the above logic using ES6 syntax. Note that this will work in all modern browsers. The only place it won't work is in any version of IE.

var arabicNumbers = ['۰', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
$('.translate').text((i, v) => v.split('').map(c => parseInt(c) ? arabicNumbers[parseInt(c)] : c).join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="translate">Dummy text with some 123 numbers in 390981 it.</div>
<div class="translate">Dummy text with some 67898 numbers in 109209734.09 it.</div>

Answer 2

for use in React , use this Component

import React, {Component} from "react";


class PersianNumber extends Component {


   render() {
       let en_number = this.props.number.toString();
       let persianDigits = "۰۱۲۳۴۵۶۷۸۹";
       let persianMap = persianDigits.split("");
       let persian_number = en_number.replace(/\d/g, function (m) {
         return persianMap[parseInt(m)];
       });

    return (
        <span>{persian_number}</span>
    )


  }

}


export default PersianNumber

save the file name as : PersianNumber.jsx and use like this :

<PersianNumber number={12365}/>

Answer 3

You can use convertToPersianNumber function that I have copied from this link and use it as the following code in jQuery

$('.translate').text(function(i, v) {
   return convertToPersianNumber(v)
})

convertToPersianNumber code

var persianDigits = "۰۱۲۳۴۵۶۷۸۹";
var persianMap = persianDigits.split("");

function convertToEnglishNumber(input){
    return input.replace(/[\u06F0-\u06F90]/g, function(m){
        return persianDigits.indexOf(m);
    });
}
function convertToPersianNumber(input){
    return input.replace(/\d/g,function(m){
        return persianMap[parseInt(m)];
    });
}

// tests
console.log(convertToEnglishNumber("۴۳۵"));
console.log(convertToEnglishNumber("۶۲۷۰۱"));
console.log(convertToEnglishNumber("۳۵۴۳"));
console.log(convertToPersianNumber("216541"));
console.log(convertToPersianNumber("16549"));
console.log(convertToPersianNumber("84621"));

Answer 4

To convert numeric characters, you just need to add/subtract the difference between two sets of Unicode characters to the original numbers. Here is an example:

// English to Persian/Arabic
console.log(
'Persian now:',
'12345'.replace(/[0-9]/g, c => String.fromCharCode(c.charCodeAt(0) + 1728))
);

// Persian/Arabic to English
console.log(
'English now:',
'۵۶۷۸۹'.replace(/[۰-۹]/g, c => String.fromCharCode(c.charCodeAt(0) - 1728))
);

Answer 5

I think this could help:

    const arabicNumbers = ['۰', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
    const ThirtyNine = 39;
    const convertToArabic = (number) => {
      return String(number).split('').map(char => arabicNumbers[Number(char)]).join('');
    }
    const inArabic = convertToArabic(ThirtyNine);

Answer 6

Try to use angularJS version, which has a lot of features,

GitHub - mohebifar/angular-persian: Persian tools for angular.js

<div >{{vm.value | pNumber}}</div>

Notice: this solution is very easy to use, but is based on angularJS.

Answer 7

in React Native : I created a function that converts number both ways according to the language direction:

import React from 'react';
import {I18nManager} from 'react-native';
const isRTL = I18nManager.isRTL; //check app direction

export function NumberConverter(number){    
    if(!isRTL){  
        //english language
        const digit = (number.toString()).replace('.', ',')
        const id= '0123456789';
        return (digit.replace(/[۰-۹]/g, function(w){
            return id[w]}))
    } else{
        //Arabic Language
        const digit = (number.toString()).replace('.', ',')
        var id = '٠١٢٣٤٥٦٧٨٩';
        return (digit.replace(/[0-9]/g, function (w) {
            return id[w]}))
    
    }
}

Then use it like this:

        import {NumberConverter} from './NumberConverter';
        NumberConverter(10)
         

Answer 8

You can try some function like below:

translateFunction: function(number){
      var looper = ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹'];
      var englishDigits = Array.from(String(number), Number);
      var farsiDigits = [];
      englishDigits.forEach(digit => {
        farsiDigits.push(looper[digit]);
      });
      console.log(farsiDigits.join(""));
    }

And the steps we have are:

1. We define an array called looper to use its items to replace our English digits.

2. We convert our string argument (like '123') to an array. As far as I know, we cannot use forEach on numbers nor strings, so we should convert it to an array.

3. We define an empty array for getting our final result.

4. The most important part, we iterate through our array and push every number from it into the farsiDigits, according to how it can be the index of looper items.

I know that this code can be written a lot better, but it was something that came to my mind now and I hope it's gonna help!

Answer 9

In VUE with the Custom Filter incase any one needed.

    Vue.filter('NumToPer', function (input) {
        return input.replace(/[0-9]/g, c => String.fromCharCode(c.charCodeAt(0) + 1728));
        
**OR USE THIS ONE**
        // var persianDigits = "۰۱۲۳۴۵۶۷۸۹";
        // var persianMap = persianDigits.split("");
    
        // return input.replace(/\d/g, function(m) {
        //     return persianMap[parseInt(m)];
        // });
    })

Answer 10

It's for your Font. You can change your font to a persian font for example 'BYekan' for your div.