Tips for substituting a pair of terms with equivalent ones from an array using Arabic JavaScript

Question

Tips for substituting a pair of terms with equivalent ones from an array using Arabic JavaScript

In my array, I have the months written in English and the days of the week also in English.

I am trying to replace the English words with their Arabic equivalents at the corresponding index in the array. My code looks simple and clean, but for some reason, it is not working. I have tried using two replace functions.

// English
var en_months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var en_days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']

// Arabic
var ar_months = ['كانون الثاني','شباط','آذار','نيسان','أيار','حزيران','تموز','آب','أيلول','تشرين الأول','تشرين الثاني','كانون الأول'];
var ar_days = ['الأحَد','الإثْنَين','الثَلاثاء','الأربَعاء','الخَميس','الجُمُعة','السَبْت']


// ACTION
jQuery("span.date").text(function(i, val) {
    return val.replace(en_months, ar_months);
    return val.replace(en_days, ar_days);
});

This is an example of the span:

<span class="date">Wednesday, October 7th, 2015</span>

There are multiple instances of this on the page.

javascript arrays arabic

Answer 1

Answer №1

When it comes to replacing elements, you can utilize the power of RegExp. In the RegExp object, you can define a pattern as a string, as demonstrated in my example. I converted the en_months array to a string using the .join method. Additionally, the indexOf method is used to find the first index of a specified element. For instance, if "October" exists in the array, it will return 9. By using this index, the corresponding element is retrieved from either ar_months or ar_days, which is then replaced using the .replace method.

// English
var en_months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

var en_days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']

// Arabic
var ar_months = ['كانون الثاني','شباط','آذار','نيسان','أيار','حزيران','تموز','آب','أيلول','تشرين الأول','تشرين الثاني','كانون الأول'];
var ar_days = ['الأحَد','الإثْنَين','الثَلاثاء','الأربَعاء','الخَميس','الجُمُعة','السَبْت']

// GO FOR IT
$("span.date").text(function(i, val) {
    val = val.replace(new RegExp(en_months.join('|')), function (match) {
        return ar_months[en_months.indexOf(match)] || match;
    });
    
    val = val.replace(new RegExp(en_days.join('|')), function (match) {
        return ar_days[en_days.indexOf(match)] || match;
    });
    
    return val;
});

.date {
   direction: rtl;
   display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="date">Wednesday, October 7th, 2015</span>

Answer 2

When it comes to replacing elements, you can utilize the power of RegExp. In the RegExp object, you can define a pattern as a string, as demonstrated in my example. I converted the en_months array to a string using the .join method. Additionally, the indexOf method is used to find the first index of a specified element. For instance, if "October" exists in the array, it will return 9. By using this index, the corresponding element is retrieved from either ar_months or ar_days, which is then replaced using the .replace method.

// English
var en_months = ['January','February','March','April','May','June','July','August','September','October','November','December'];

var en_days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']

// Arabic
var ar_months = ['كانون الثاني','شباط','آذار','نيسان','أيار','حزيران','تموز','آب','أيلول','تشرين الأول','تشرين الثاني','كانون الأول'];
var ar_days = ['الأحَد','الإثْنَين','الثَلاثاء','الأربَعاء','الخَميس','الجُمُعة','السَبْت']

// GO FOR IT
$("span.date").text(function(i, val) {
    val = val.replace(new RegExp(en_months.join('|')), function (match) {
        return ar_months[en_months.indexOf(match)] || match;
    });
    
    val = val.replace(new RegExp(en_days.join('|')), function (match) {
        return ar_days[en_days.indexOf(match)] || match;
    });
    
    return val;
});

.date {
   direction: rtl;
   display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="date">Wednesday, October 7th, 2015</span>

Answer 3

Answer №2

To update the values, you must iterate through each possible value and replace them individually.
The function stops executing after encountering the first return ....

jQuery("span.date").text(function() {
    var text = val,
        i;

    for (i = 0; i < en_months.length; i++) {
        text = text.replace(en_months[i], ar_months[i]);
    }
    for (i = 0; i < en_days.length; i++) {
        text = text.replace(en_days[i], ar_days[i]);
    }

    return text;
});

Check out the fiddle

Answer 4

To update the values, you must iterate through each possible value and replace them individually.
The function stops executing after encountering the first return ....

jQuery("span.date").text(function() {
    var text = val,
        i;

    for (i = 0; i < en_months.length; i++) {
        text = text.replace(en_months[i], ar_months[i]);
    }
    for (i = 0; i < en_days.length; i++) {
        text = text.replace(en_days[i], ar_days[i]);
    }

    return text;
});

Check out the fiddle

Tips for substituting a pair of terms with equivalent ones from an array using Arabic JavaScript

Answer №1

Answer №2

Similar questions

Ensuring the value of a v-text-field in Vuetify using Cypress

How to Overcome Read-only HTML Components in Selenium with Python?

AJAX enhancing the functionality of the webgrid with dynamic filtering

Is there a way to include this function in an array without triggering it right away?

Printing feature not functioning properly on Internet Explorer version 11

Ways to emphasize the contrast between two texts using CSS

Generating CSV headers for all nested objects in JavaScript

Locate the closest larger value for each element within the array

The NextJs image entered into an endless loop, throwing an error message that said: "The 'url' parameter is correct, but the response from the

The Google map shifts beyond the perceived limits of the world

Determining the quantity of regions with valid data in a two-dimensional array

Public directory assets not accessible

Leveraging Redux and React to efficiently map state to props, while efficiently managing large volumes of data and efficiently

Struggling to save a signature created with an HTML5 Canvas to the database

Reading data from Firestore in Next.js

Modify the value of a CSS property through JavaScript

Vue: Issue with Firebase Authentication REST API triggers 400 Bad Request Error

Access an array element based on its value

"An issue with ng-controller in AngularJS causing a simple error

What is the process for incorporating ejs into the source attribute of an image element?