jQuery replace English Number array with Arabic Number array

Question

I have many spans on my page with this class

<span class="price">AED &nbsp;2129</span>
<span class="price">AED &nbsp;4129</span>

I want to use jQuery to find all the spans and then replace the AED with the Arabic word of Dirham and also replace the numbers with Arabic numbers.

This is my current code I have been trying for some hours.

jQuery('span.price').val(function(i,val) {

    // text
    var en_currency = "AED";
    var ar_currency = "درهم";

    // array
    var f = ['0','1','2','3','4','5','6','7','8','9', en_currency];
    var r = ['٠','١','٢','٣','٤','٥','٦','٧','٨','٩', ar_currency];

    var valArray = val.split(' ');
    jQuery.each(valArray, function(i,v){
       var inF = jQuery.inArray(v, f);
       if(inF !== -1){
         valArray[i] = v.replace(f[inF], r[inF]);
       }
    });
    return valArray.join(' ');
});

Answer 1

You need to use text() not val(), val() using for getting or setting form fields in case of span text() is needed. Then you can simplify your code with callback in replace()

// text
var en_currency = "AED";
var ar_currency = "درهم";

// array
var f = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
var r = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];


jQuery('span.price').text(function(i, val) {
  return val.replace(en_currency, ar_currency).replace(/\d/g, function(m) {
    return r[f.indexOf(m)];
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="price"> AED 2312 </span>
<span class="price"> AED 1023 </span>

Answer 2

Use text or html. span elements don't have value attribute.

jQuery('span.price').val(function(i,val) {
//                   ^^^

Should be

jQuery('span.price').text(function(i,val) {

Demo:

// text
var en_currency = "AED";
var ar_currency = "درهم";

// array
var f = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
var r = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];


jQuery('span.price').text(function(i, val) {
  val = val.replace(en_currency, ar_currency);
  
  var valArray = val.split('');
  
  jQuery.each(valArray, function(i, v) {
    console.log(i,v);
    var inF = jQuery.inArray(v, f);
    if (inF !== -1) {
      valArray[i] = v.replace(f[inF], r[inF]);
    }
  });
  return valArray.join('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="price">AED &nbsp;2129</span>
<span class="price">AED &nbsp;4129</span>