How to sort an array that contains strings with letters and numbers in JavaScript

Question

I'm working on a web application that make you a test for choosing your professional vocation, it makes 90 questions and depending of your answer it will display a list of the first 3 options of what professions are more appropiate for you.

The process:

var vars = [ calc, cFis, CBio]; //array of variables with numeric values of test results.
var keys = object.keys(vars);
var newArray = [];
var names = ['Cálculo', 'Cientifico - Físico', ect]; //array of the names of the professional abilities

//first sorting the array
keys.sort(function(a,b) {
    return vars[b] - vars[a];
});
//create newArray whit the results
keys.forEach(function(key) {
    newArray.push(names[key] + ' : ' + vars[key]);
});
//print results
document.getElementById('primero').innerHTML = newArray[0];
document.getElementById('segundo').innerHTML = newArray[1];
document.getElementById('tercero').innerHTML = newArray[3];

It will show:

Cálculo : 60
Cientifico - Físico : 45
ect.

The problem

The vars[key] has to be approximated to a percentage using a table of pre-defined values, like this:

Cálculo test points are between  60 - 65 then % must be 80%

Now the string to print must be like : Cálculo : 80% now, asuming that I have 3 professions and 3 diferents % values, Cálculo : 80% , C - Fisico : 60% , art : 30% I have to display in order of their % value like:

Cálculo : 80% C - Físico : 60% Art : 30%

Is there a way to get the numeric characters on a string for sorting the array in numeric order? like the example above?

I was trying something called natural sort but it always sort the arrays using the alphabetic value before the numeric ones. like:

Art : 30% Cálculo : 80% C - Físico 60%

Answer 1

One thing you can do is convert the strings into numbers (removing the % at the end), then sort the array in descending order:

 var arr = ["Art : 30%", "Cálculo : 80%", "C - Físico: 60%"]; arr.sort(function(a, b){ // Substring between ": <substring here>%". a = +a.substring(a.indexOf(":")+1, a.length - 1); b = +b.substring(b.indexOf(":")+1, b.length - 1); return b - a; // decending order }); console.log(arr); 

For items such as "Art : 30%" you will want the start the substring at the index of ":"+1 .

---

Another way you can do this is to use regular expressions, matching the digits in the strings using .match(/\\d+/g) to return the string that only contains digits.

 var arr = ["Art : 30%", "Cálculo : 80%", "C - Físico: 60%"]; arr.sort(function(a, b) { a = +a.match(/\\d+/g); b = +b.match(/\\d+/g); return b - a; }); console.log(arr); 

Just be careful of using the second method, it won't work if there are numbers being used other than the ones as percents. For example if one was "Art1 : 30%" the second method would not work. One way to get around that is to use /\\d+%/g and then remove the % at the end.