JavaScript: Extracting a list from a string!
This is a common (coding) problem when you have a string and you have to extract a list from it.
Say, the sentence (string) is: My favourite heroes are: Iron Man, Dr Strange, Groot. Then the list should be ["Iron Man", "Dr Strange", "Groot"].
So, let's break down the problem into parts, and then solve it.
Breaking the problem
We want to cut the strings, in such a way that it only lefts with the data that we need. So after this, the string should be:
Iron Man, Dr Strange, GrootFor this, first find the position of the colon sign (:), and the period (.) after that colon sign.
Cut the string, and get the part between the colon and the period.
After that, we need to split it and make a list, which should be like this.
["Iron Man", " Dr Strange", " Groot"].Finally, we want to trim each element of the list, so we don't have unnecessary white spaces.
Let's get started with the code.
Solution
1.1 - Find the position of the colon sign and the period after that colon sign.
const sentence = "My favourite heroes are: Iron Man, Dr Strange, Groot.";
// Finding the colon sign (:)
const colon = sentence.indexOf(":");
// Finding the period (.) after the colon
const period = sentence.indexOf(".", colon);
console.log(`Colon is at index ${colon}.`); // Colon is at index 23.
console.log(`Period is at index ${period}.`); // Period is at index 52.
The code above uses indexOf method to find the needed indices.
1.2 - Cut the string, and get the part between the colon and the period.
// Slicing the string
const slicedSentence = sentence.slice(colon + 1, period);
// colon + 1, because we want to get the part after the colon.
// period is already excluded.
console.log(slicedSentence);
// " Iron Man, Dr Strange, Groot"
// Consider the white space at the beginning.
slice(a, b) includes the "a" and excludes the "b".
2 - Split the string and make a list.
// Splitting the string
const heroList = slicedSentence.split(",");
console.log(heroList);
// [' Iron Man', ' Dr Strange', ' Groot']
split method splits the sentence by the separator, and makes a list of all the parts of it.
3 - Trim all the elements of the list.
// Trimming the elements of the list
heroList.forEach((value, index, originalList) => {
originalList[index] = value.trim();
});
console.log(heroList);
// ['Iron Man', 'Dr Strange', 'Groot']
In the code above, we have used the forEach method, which takes a call-back function. the call-back function takes in the value, index and the original array (or list).
value is the value of the current element of the list which is being iterated.
index is the index of the current element which is being iterated.
originalList is the list, which we are currently traversing.
Inside the call-back function, we simply trim the current element, using the trim method, and reassign it to the list.
Fair enough?
In the book, they've introduced the concept of chaining.
So we can modify our code a little bit, and let's try chaining.
// Previous code
const slicedSentence = sentence.slice(colon + 1, period);
const heroList = slicedSentence.split(",");
// After chaining
const heroList = sentence.slice(colon + 1, period).split(",");
This way, slicedSentence will not be needed.
Complete code
Feel free to copy the complete code, try it, and play around.
const sentence = "My favourite heroes are: Iron Man, Dr Strange, Groot.";
// Finding the colon sign (:)
const colon = sentence.indexOf(":");
// Finding the period (.) after the colon
const period = sentence.indexOf(".", colon);
console.log(`Colon is at index ${colon}.`);
console.log(`Period is at index ${period}.`);
// Slicing the string
const slicedSentence = sentence.slice(colon + 1, period);
// colon + 1, because we want to get the part after the colon.
// period is already excluded.
console.log(slicedSentence);
// Splitting the string
const heroList = slicedSentence.split(",");
console.log(heroList);
// Trimming the elements of the list
heroList.forEach((value, index, originalList) => {
originalList[index] = value.trim();
});
console.log(heroList);
Thanks for reading!