Rearranging an array using the numbers contained within the array elements in JavaScript

Question

Rearranging an array using the numbers contained within the array elements in JavaScript

I'm currently working on unscrambling an array. The array contains string elements that are not in the correct order, with numbers attached to indicate their desired position. My goal is to extract these numbers from each item and rearrange them in a new array based on those numbers. For instance, let's take

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"]

. I already have a function that can locate and isolate these numbers within each item.

function unscramblePhrase() {
    var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"];   
    var unscrambled = [];
    for (var counter = 0; counter < scrambled.length; counter++) {
        numPosition = scrambled[counter].search('[0-9]');
        arrayIndex = scrambled[counter].substring(numPosition);
        console.log(arrayIndex);
        unscrambled.push(scrambled[arrayIndex]);
    }
 console.log(unscrambled)
}

Currently, my approach of using the extracted numbers to reposition the elements in a new array is not yielding the desired outcome - instead of unscrambling, it just produces another scrambled array:

["want1", "I0", "pizza4", "eat3", "to2"]

.

javascript arrays

Answer 1

Answer №1

The approach you're taking to sort the array may not be optimal. Instead of using Array.prototype.push, consider directly assigning the value to the desired index in the unscrambled array.

unscrambled[arrayIndex] = scrambled[counter];

Alternatively, you can utilize the `Array.prototype.sort` method

function getNum(str){
    return Number(str.substring(str.length -1));
}

unscrambled.sort((a, b) => getNum(a) - getNum(b));

Please note: The provided method sorts the array in-place. Depending on your requirements, this may or may not be desirable.

If needed, you can always apply this sorting operation on a clone of the array:
[...unscrambled].sort((a, b) => getNum(a) - getNum(b));

Answer 2

The approach you're taking to sort the array may not be optimal. Instead of using Array.prototype.push, consider directly assigning the value to the desired index in the unscrambled array.

unscrambled[arrayIndex] = scrambled[counter];

Alternatively, you can utilize the `Array.prototype.sort` method

function getNum(str){
    return Number(str.substring(str.length -1));
}

unscrambled.sort((a, b) => getNum(a) - getNum(b));

Please note: The provided method sorts the array in-place. Depending on your requirements, this may or may not be desirable.

If needed, you can always apply this sorting operation on a clone of the array:
[...unscrambled].sort((a, b) => getNum(a) - getNum(b));

Answer 3

Answer №2

To simplify this process, you can utilize Regular Expressions (RegEx) to divide the array into value and index pairs, sort them accordingly, and then eliminate any extra information by using a secondary method like .map to return the string array.

scrambled.map(i => 
[i.replace(/\d/g,""), +i.replace(/\D/g,"")])
.sort((a, b) => a[1] - b[1])).map(i => i[0]);

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"];   

var unscrambled = scrambled.map(i => 
  [i.replace(/\d/g,""), +i.replace(/\D/g,"")])
  .sort((a, b) => a[1] - b[1])
  .map( i => i[0]);

console.log(unscrambled);

Answer 4

To simplify this process, you can utilize Regular Expressions (RegEx) to divide the array into value and index pairs, sort them accordingly, and then eliminate any extra information by using a secondary method like .map to return the string array.

scrambled.map(i => 
[i.replace(/\d/g,""), +i.replace(/\D/g,"")])
.sort((a, b) => a[1] - b[1])).map(i => i[0]);

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"];   

var unscrambled = scrambled.map(i => 
  [i.replace(/\d/g,""), +i.replace(/\D/g,"")])
  .sort((a, b) => a[1] - b[1])
  .map( i => i[0]);

console.log(unscrambled);

Answer 5

Answer №3

Give this a try, it might do the trick:

function descrambleWords() {
    var scrambled = ["apple4", "banana2", "orange0", "pear3", "grapes1"];<br>
    var descrambled = [];
    for (var count = 0; count < scrambled.length; count++) {
        numPos = scrambled[count].search('[0-9]');
        arrIndex = scrambled[count].substring(numPos);
        console.log(arrIndex);
        descrambled[arrIndex] = scrambled[count];
    }
 console.log(descrambled)
}

Answer 6

Give this a try, it might do the trick:

function descrambleWords() {
    var scrambled = ["apple4", "banana2", "orange0", "pear3", "grapes1"];<br>
    var descrambled = [];
    for (var count = 0; count < scrambled.length; count++) {
        numPos = scrambled[count].search('[0-9]');
        arrIndex = scrambled[count].substring(numPos);
        console.log(arrIndex);
        descrambled[arrIndex] = scrambled[count];
    }
 console.log(descrambled)
}

Answer 7

Answer №4

You may also try using the "Array.sort" method in this way:

var scrambledWords = ["pizza4", "to2", "I0", "eat3", "want1"]

let getNumberIndex = (word) => [...word].findIndex(letter => Number.isInteger(+letter))

let getNumber = (word) => word.slice(getNumberIndex(word))

let unscrambledWords = scrambledWords.slice(0).sort((a, b) => getNumber(a) - getNumber(b))

console.log(unscrambledWords)

Answer 8

You may also try using the "Array.sort" method in this way:

var scrambledWords = ["pizza4", "to2", "I0", "eat3", "want1"]

let getNumberIndex = (word) => [...word].findIndex(letter => Number.isInteger(+letter))

let getNumber = (word) => word.slice(getNumberIndex(word))

let unscrambledWords = scrambledWords.slice(0).sort((a, b) => getNumber(a) - getNumber(b))

console.log(unscrambledWords)

Answer 9

Answer №5

let phrases = ["I0", "want1", "to2", "eat3", "pizza4"];

phrases
    .map(w => parseInt(w[--w.length]))
    .sort()
    .map(i => phrases.filter(w => w[--w.length] == i)[0].replace(i, ''));

// Result: ["I", "want", "to", "eat", "pizza"]

Answer 10

let phrases = ["I0", "want1", "to2", "eat3", "pizza4"];

phrases
    .map(w => parseInt(w[--w.length]))
    .sort()
    .map(i => phrases.filter(w => w[--w.length] == i)[0].replace(i, ''));

// Result: ["I", "want", "to", "eat", "pizza"]

Answer 11

Answer №6

If you want to manipulate a string and index values using a single loop, here are two fun ways to do it:

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"],
    result = scrambled.reduce((r, string) => {
        var [s, i] = string.match(/\D+|\d+/g);
        r[i] = s;
        return r;
    }, []);
    
console.log(result);

Explore more exciting techniques with objects below!

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"],
    result = Object.assign(
        [],
        ...scrambled.map(s => (([v, k]) => ({ [k]: v }))(s.match(/\D+|\d+/g)))
    );
    
console.log(result);

Answer 12

If you want to manipulate a string and index values using a single loop, here are two fun ways to do it:

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"],
    result = scrambled.reduce((r, string) => {
        var [s, i] = string.match(/\D+|\d+/g);
        r[i] = s;
        return r;
    }, []);
    
console.log(result);

Explore more exciting techniques with objects below!

var scrambled = ["pizza4", "to2", "I0", "eat3", "want1"],
    result = Object.assign(
        [],
        ...scrambled.map(s => (([v, k]) => ({ [k]: v }))(s.match(/\D+|\d+/g)))
    );
    
console.log(result);

Rearranging an array using the numbers contained within the array elements in JavaScript

Answer №1

Alternatively, you can utilize the `Array.prototype.sort` method

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Incorporating Vue.js components into PHP applications

Comparison between referencing the DOM and storing references to the DOM elements

Step-by-step guide on building an admin dashboard for your React application

"Vanishing Act: Google Maps Markers in React Mysteriously Disappear upon

Warning: Typescript is unable to locate the specified module, which may result

Count of daily features in JavaScript

What is the best way to use ajax to send a specific input value to a database from a pool of multiple input values

What is the inner workings behind server side rendering in Next.js?

Navigating through JQuery

Sending data to the template

Reset IntersectionObserverAPI to its initial state when none of the elements are in view

Steps for adjusting button size in Sencha Touch

Save JSON Tree data in the Database

Guide on Redirecting Response to a File using Co-Request module with NodeJs

What is the process for changing colors once vertex colors have been updated?

Issue: React does not allow objects as children for rendering. (You have provided an object with keys {user})

Utilizing Conditional Styling for an Array of Objects within a Textarea in Angular 6

Add a picture and adjust its size as needed

How can I update the gradient color upon refreshing the page while ensuring the cursor remains on the same

I keep encountering errors with TypeGuard

Rearranging an array using the numbers contained within the array elements in JavaScript

Answer №1

Alternatively, you can utilize the Array.prototype.sort method

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Incorporating Vue.js components into PHP applications

Comparison between referencing the DOM and storing references to the DOM elements

Step-by-step guide on building an admin dashboard for your React application

"Vanishing Act: Google Maps Markers in React Mysteriously Disappear upon

Warning: Typescript is unable to locate the specified module, which may result

Count of daily features in JavaScript

What is the best way to use ajax to send a specific input value to a database from a pool of multiple input values

What is the inner workings behind server side rendering in Next.js?

Navigating through JQuery

Sending data to the template

Reset IntersectionObserverAPI to its initial state when none of the elements are in view

Steps for adjusting button size in Sencha Touch

Save JSON Tree data in the Database

Guide on Redirecting Response to a File using Co-Request module with NodeJs

What is the process for changing colors once vertex colors have been updated?

Issue: React does not allow objects as children for rendering. (You have provided an object with keys {user})

Utilizing Conditional Styling for an Array of Objects within a Textarea in Angular 6

Add a picture and adjust its size as needed

How can I update the gradient color upon refreshing the page while ensuring the cursor remains on the same

I keep encountering errors with TypeGuard

Alternatively, you can utilize the `Array.prototype.sort` method