Mastering String Manipulation in JavaScript: 12 Solved Exercises

String manipulation is a core skill for any developer. In this article, we will explore 12 essential string manipulation techniques in JavaScript, followed by advanced challenges that will test and enhance your skills. These challenges are inspired by hard-level problems from LeetCode and HackerRank, ensuring you are well-prepared for the most difficult string manipulation scenarios.

1. Concatenating Strings

How to Think:

Concatenating strings is fundamental when you need to build new strings from smaller parts. In complex challenges, this might involve constructing answers based on various conditions.

Exercise:

Given an array of strings, concatenate them in all possible orders, returning the lexicographically smallest order.

const minLexicographicalOrder = (strings) => {

  // We sort the strings based on the lexicographically smallest combination

  return strings.sort((a, b) => (a + b).localeCompare(b + a)).join('');

};

// Testing the function with an array of strings

const result = minLexicographicalOrder(["c", "cb", "cba"]); // "cbacbc"

console.log(result);        

Detailed Explanation:

1. Function minLexicographicalOrder:

const minLexicographicalOrder = (strings) => {        

• We receive an array of strings and need to order them so that the resulting concatenation is the smallest possible in lexicographical order.

1. Custom Sorting:

return strings.sort((a, b) => (a + b).localeCompare(b + a)).join('');        

• We use sort() with a custom comparison function. The comparison function tests the concatenations a + b and b + a, and uses localeCompare() to determine which combination is lexicographically smaller.
• localeCompare() returns a negative value if a + b should come before b + a, a positive value if a + b should come after, and 0 if they are equal.

1. Final Concatenation:

.join('');        

• After sorting, we use join('') to concatenate the ordered strings into a final single string.

1. Testing the Function:

const result = minLexicographicalOrder(["c", "cb", "cba"]);        

console.log(result);        

• The result for the array ["c", "cb", "cba"] will be "cbacbc", the smallest lexicographical combination possible.

2. Extracting Substrings with substring() and slice()

How to Think:

Extracting substrings is crucial in problems where you need to analyze specific parts of a string. In advanced challenges, you might need to generate and test many substrings to find a specific pattern, like palindromes.

Exercise:

Given a string, generate all possible combinations of substrings, check if any of them is a palindrome, and return the largest palindrome found.

const longestPalindromeSubstring = (s) => {

  // Initialize a variable to store the largest palindrome found so far

  let longest = '';

  // The first loop iterates through each character of the string 's' as the starting point of the substring

  for (let i = 0; i < s.length; i++) {

    

    // The second loop iterates from the current position 'i' to the end of the string, forming substrings

    for (let j = i + 1; j <= s.length; j++) {

      

      // We extract a substring from 'i' to 'j'

      const substr = s.slice(i, j);

      // We check if the current substring is a palindrome

      if (substr === substr.split('').reverse().join('')) {

        

        // If the length of the current palindrome is greater than the longest palindrome found so far,

        // we update 'longest' with the new palindrome

        if (substr.length > longest.length) {

          longest = substr;

        }

      }

    }

  }

  // Return the largest palindrome found

  return longest;

};

// Testing the function with a string

const result = longestPalindromeSubstring("babad"); // "bab" or "aba"

console.log(result);        

Detailed Explanation:

1. Variable longest:

let longest = '';        

• We start with an empty string longest that will store the largest palindrome found so far since we haven't checked any substring yet.

1. Outer Loop (Start of Substrings):

for (let i = 0; i < s.length; i++) {        

• This loop iterates through each character of the string s. The index i marks the start of the substring we are considering. The loop runs from the beginning to the end of the string.

1. Inner Loop (End of Substrings):

for (let j = i + 1; j <= s.length; j++) {        

• This second loop starts at the position immediately after i (j = i + 1) and runs to the end of the string. j marks the end of the substring. As j iterates, we form all possible substrings that start at i.

1. Forming the Substring:

const substr = s.slice(i, j);        

• We use slice(i, j) to extract a substring from s, starting at i and ending at j-1. slice() returns a part of the original string between the given indices.

1. Palindrome Check:

if (substr === substr.split('').reverse().join('')) {        

• Here, we check if the substring is a palindrome. To do this, we split the string into an array of characters (split('')), reverse the array (reverse()), and then join the characters back into a string (join('')). If the original string equals the reversed string, it is a palindrome.

1. Updating the Largest Palindrome Substring:

if (substr.length > longest.length) {

  longest = substr;

}        

• If the current substring is longer than the largest palindrome found so far (longest), we update longest with the new substring.

1. Returning the Result:

return longest;

• Finally, after all the loops, we return the largest palindrome substring found.

1. Testing the Function:

const result = longestPalindromeSubstring("babad"); 

console.log(result); // "bab" or "aba"        

• We test the function with the string "babad". The function returns "bab" or "aba", as both are palindromic substrings with the maximum length.

3. Finding the Position of a Substring with indexOf()

How to Think:

Using indexOf() is necessary when you need to locate parts of a string for subsequent decisions. In complex challenges, this can be combined with loops and conditions to process large strings.

Exercise:

Find all occurrences of a substring within a larger string and return the starting positions of each occurrence.

const findAllOccurrences = (text, pattern) => {

  // Initialize an array to store the positions of occurrences

  let positions = [];

  

  // We use indexOf to find the first occurrence of the pattern

  let pos = text.indexOf(pattern);

  

  // As long as the found position is not -1, we continue the search

  while (pos !== -1) {

    // Add the current position to the array of positions

    positions.push(pos);

    

    // Find the next occurrence of the pattern, starting right after the current position

    pos = text.indexOf(pattern, pos + 1);

  }

  

  // Return the array with all the positions of the occurrences

  return positions;

};

// Testing the function with a string and a pattern

const result = findAllOccurrences("ababcabc", "abc"); 

console.log(result); // [2, 5]        

Detailed Explanation:

1. Array positions:

let positions = [];        

• We start with an empty array positions that will store the positions where the substring pattern is found in the main string.

1. First Occurrence:

let pos = text.indexOf(pattern);        

• We use indexOf() to find the first occurrence of the substring pattern within text. If the pattern is not found, indexOf() returns -1.

1. Loop to Find All Occurrences:

while (pos !== -1) {        

• As long as pos is not -1, it means the pattern was found, and we continue the search.

1. Storing the Position:

positions.push(pos);        

• We add the current position pos to the positions array.

1. Finding the Next Occurrence:

pos = text.indexOf(pattern, pos + 1);        

• We find the next occurrence of the pattern starting from the position immediately after the current one (pos + 1) to ensure we don't count the same occurrence

multiple times.

1. Returning the Positions:

return positions;        

• We return the positions array containing all the starting positions where the pattern was found in the main string.

1. Testing the Function:

const result = findAllOccurrences("ababcabc", "abc");

console.log(result); // [2, 5]        

• We test the function with the string "ababcabc" and the pattern "abc". The function returns [2, 5], indicating that the pattern was found at positions 2 and 5.

4. Replacing Substrings with replace()

How to Think:

Replacing substrings is useful in problems where specific parts of a string need to be modified. In more advanced challenges, this might involve complex conditions and multiple replacements.

Exercise:

Given a string, replace all occurrences of a word with another, but only if the word is not surrounded by alphabetic characters.

const conditionalReplace = (text, target, replacement) => {

  // Construct a pattern using the target word surrounded by word boundaries

  const pattern = new RegExp(`\\b${target}\\b`, 'g');

  

  // Replace occurrences of the pattern with the replacement word

  return text.replace(pattern, replacement);

};

// Testing the function with a string

const result = conditionalReplace("the theater is theirs", "the", "a");

console.log(result);  // "a theater is theirs"        

Detailed Explanation:

1. Replacement Pattern:

const pattern = new RegExp(`\\b${target}\\b`, 'g');        

• We use RegExp to construct a pattern that matches the exact word target, using \\b to indicate word boundaries (i.e., the word should not be adjacent to other alphabetic characters).

1. Conditional Replacement:

return text.replace(pattern, replacement);        

• We use replace() to substitute all occurrences of the pattern (indicated by the global modifier 'g') with the replacement word.

1. Testing the Function:

const result = conditionalReplace("the theater is theirs", "the", "a");

console.log(result); // "a theater is theirs"        

• We test the function with the phrase "the theater is theirs", replacing "the" with "a". The result is "a theater is theirs", where only the "the" that is not part of another word is replaced.

5. Trimming Whitespace with trim()

How to Think:

Trimming whitespace is crucial for cleaning up data, especially when processing user input. In challenges, this can be combined with other string manipulation techniques.

Exercise:

Given a string containing words separated by varying amounts of spaces, normalize the string by removing extra spaces between the words and any leading or trailing spaces.

const normalizeSpaces = (text) => {

  // First, trim leading and trailing spaces with trim()

  // Then, split the string into words using split with a regex that captures one or more spaces

  // Finally, join the words with a single space between them using join

  return text.trim().split(/\s+/).join(' ');

};

// Testing the function with a string

const result = normalizeSpaces("  I  love   programming  "); // "I love programming"

console.log(result);        

Detailed Explanation:

1. Trimming Leading and Trailing Spaces:

text.trim()        

• trim() removes any whitespace from the beginning and end of the string, preparing the string for normalization.

1. Splitting into Words:

.split(/\s+/)        

• We use split(/\s+/) to divide the string into words. The \s+ is a regular expression that matches one or more whitespace characters, ensuring that multiple spaces are treated as a single separator.

1. Joining the Words:

.join(' ');        

• Finally, we use join(' ') to concatenate the words with a single space between them, creating a normalized string without extra spaces.

1. Testing the Function:

const result = normalizeSpaces("  I  love   programming  ");

console.log(result); // "I love programming"        

• We test the function with the string "? I? love ? programming? ". The function returns "I love programming", with the extra spaces removed and a single space between the words.

6. Splitting Strings with split()

How to Think:

split() is essential in problems where you need to separate a string into components for further processing. Complex challenges might require intelligent use of delimiters.

Exercise:

Given a string that contains multiple words separated by non-alphabetic characters, split the string into individual words.

const splitWords = (text) => {

  // Use split with a regex that matches any non-alphabetic character

  return text.split(/[^a-zA-Z]+/);

};

// Testing the function with a string

const result = splitWords("I,love-programming!");

console.log(result);  // ["I", "love", "programming"]        

Detailed Explanation:

1. Splitting the String:

return text.split(/[^a-zA-Z]+/);        

• We use split() with a regular expression [^a-zA-Z]+, which matches any sequence of non-alphabetic characters, such as commas, hyphens, and exclamation marks. This ensures the string is split correctly into words.

1. Testing the Function:

const result = splitWords("I,love-programming!");

console.log(result); // ["I", "love", "programming"]        

• We test the function with the string "I,love-programming!". The function returns ["I", "love", "programming"], separating the words and removing the non-alphabetic characters.

7. Changing Case with toUpperCase() and toLowerCase()

How to Think:

Changing the case of strings can be useful in challenges where data normalization is needed, especially for comparisons.

Exercise:

Convert a string to camelCase, where the first word is lowercase and the following words have the first letter capitalized.

const toCamelCase = (text) => {

  // First, split the string into words based on spaces

  // Then, use map to transform the first word to lowercase and the following words to camelCase

  // Finally, join the words without spaces to form the camelCase string

  return text.split(' ').map((word, index) =>

    index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()

  ).join('');

};

// Testing the function with a string

const result = toCamelCase("i love programming");

console.log(result);  // "iLoveProgramming"        

Detailed Explanation:

1. Splitting the String:

return text.split(' ')        

• We split the string into words based on spaces. This gives us an array of words to work with.

1. Transforming the Words:

.map((word, index) =>

  index === 0 ? word.toLowerCase() : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()

)        

• We use map() to transform each word:

1. Forming the camelCase String:

.join('');        

• Finally, we join the transformed words without spaces, creating a camelCase string.

1. Testing the Function:

const result = toCamelCase("i love programming");

console.log(result); // "iLoveProgramming"        

• We test the function with the string "i love programming". The function returns "iLoveProgramming", with the first word in lowercase and the following words in camelCase.

8. Checking Substring Presence with includes()

How to Think:

includes() is useful for quick checks within strings, especially in problems that require the presence or absence of patterns.

Exercise:

Check if a string contains all the words in a list of words, returning true if all are present.

const containsAllWords = (text, words) => {

  // Use every to check if all words in the list are included in the text string

  return words.every(word => text.includes(word));

};

// Testing the function with a string and a list of words

const result = containsAllWords("I love programming", ["love", "programming"]); 
console.log(result); // true
        

Detailed Explanation:

1. Presence Check with every:

return words.every(word => text.includes(word));        

• We use every() to iterate over the words array and check if each word is present in text using includes(). every() returns true only if all checks are true.

1. Testing the Function:

const result = containsAllWords("I love programming", ["love", "programming"]);

console.log(result); // true        

• We test the function with the string "I love programming" and the list of words ["love", "programming"]. The function returns true, indicating that all words in the list are present in the string.

9. Repeating Strings with repeat()

How to Think:

Repeating strings can be useful in problems that require repetitive patterns, such as formatting or creating padding strings.

Exercise:

Given a short string, create a string that repeats the content until it reaches a specific length.

const repeatToLength = (text, length) => {

  // Use repeat to repeat the string enough times to exceed the desired length

  // Then use slice to cut the repeated string to the exact desired length

  return text.repeat(Math.ceil(length / text.length)).slice(0, length);

};

// Testing the function with a short string and a desired length

const result = repeatToLength("abc", 10); 

console.log(result); // "abcabcabca"        

Detailed Explanation:

1. Repeating the String:

text.repeat(Math.ceil(length / text.length))        

• We use repeat() to repeat the string enough times to ensure that the resulting string is at least as long as length. Math.ceil(length / text.length) calculates how many times we need to repeat the string to cover the desired length.

1. Trimming to the Exact Length:

.slice(0, length);        

• We use slice(0, length) to trim the repeated string to the exact desired length, ensuring the final string has exactly the specified length.

1. Testing the Function:

const result = repeatToLength("abc", 10);

console.log(result); // "abcabcabca"        

• We test the function with the string "abc" and the length 10. The function returns "abcabcabca", a string of 10 characters composed of repeated "abc".

10. Comparing Strings with localeCompare()

How to Think:

Comparing strings is essential in custom sorting, especially when the language or culture affects the order.

Exercise:

Sort a list of city names based on reverse alphabetical order using locale rules.

const sortCitiesDescending = (cities) => {

  // Use sort with a custom comparison function that reverses the order using localeCompare

  return cities.sort((a, b) => b.localeCompare(a));

};

// Testing the function with an array of city names

const result = sortCitiesDescending(["Tokyo", "Paris", "New York", "Berlin"]); // ["Tokyo", "Paris", "New York", "Berlin"]

console.log(result);        

Detailed Explanation:

1. Reverse Sorting:

return cities.sort((a, b) => b.localeCompare(a));

• We use sort() with a comparison function that uses localeCompare() to determine the correct order of the city names. By reversing the arguments a and b, we sort the cities in descending order.

1. Testing the Function:

const result = sortCitiesDescending([ "Berlin", "Paris", "New York", "Tokyo" ]);

console.log(result); // ["Tokyo", "Paris", "New York", "Berlin"]        

• We test the function with an array of city names ["Tokyo", "Paris", "New York", "Berlin"]. The function returns ["Tokyo", "Paris", "New York", "Berlin"], sorted in reverse alphabetical order according to locale rules.

11. Checking for Prefixes and Suffixes with startsWith() and endsWith()

How to Think:

Use startsWith() and endsWith() to check if a string begins or ends with a specific substring. This is useful for validating formats, such as URLs or file paths.

Exercise:

Given an array of URLs, check how many start with "https" and how many end with ".com".

const checkUrls = (urls) => {

  let httpsCount = 0;

  let comCount = 0;

  

  urls.forEach(url => {

    if (url.startsWith("https")) {

      httpsCount++;

    }

    if (url.endsWith(".com")) {

      comCount++;

    }

  });

  return { httpsCount, comCount };

};

// Testing the function with an array of URLs

const result = checkUrls(["https://example.com", "https://example.org", "https://mysite.com", "ftp://another.com"]); 



console.log(result); // { httpsCount: 2, comCount: 3 }        

Detailed Explanation:

1. Initialization:

let httpsCount = 0;

let comCount = 0;        

• We initialize two counters, httpsCount to track how many URLs start with "https", and comCount to track how many URLs end with ".com".

1. Iterating Over URLs:

urls.forEach(url => {        

• We use forEach() to iterate over each URL in the array.

1. Checking with startsWith and endsWith:

if (url.startsWith("https")) {

  httpsCount++;

}

if (url.endsWith(".com")) {

  comCount++;

}        

• For each URL, we check if it starts with "https" using startsWith(), and if it ends with ".com" using endsWith(). We increment the respective counters based on the results.

1. Returning the Counts:

return { httpsCount, comCount };        

• We return an object containing the counts of URLs that start with "https" and end with ".com".

1. Testing the Function:

const result = checkUrls(["https://example.com", "https://example.org", "https://mysite.com", "ftp://another.com"]); 

console.log(result); // { httpsCount: 2, comCount: 3 }        

• We test the function with an array of URLs. The function returns { httpsCount: 2, comCount: 3 }, indicating that 2 URLs start with "https" and 3 URLs end with ".com".

12. Transforming Arrays into Strings with join()

How to Think:

When you have an array of strings that needs to be joined into a single string, join() is the ideal function. It can be used to create sentences, CSVs, or other forms of output.

Exercise:

Given an array of words, convert it into a single sentence where each word is capitalized and separated by a space.

const createSentence = (words) => {

  // Use map to capitalize the first letter of each word

  // Then use join to combine the words into a single sentence

  return words.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');

};

// Testing the function with an array of words

const result = createSentence(["the", "quick", "brown", "fox"]); Fox"

console.log(result); // "The Quick Brown         

Detailed Explanation:

1. Capitalizing Each Word:

return words.map(word => word.charAt(0).toUpperCase() + word.slice(1))        

• We use map() to iterate over each word in the array, capitalizing the first letter with charAt(0).toUpperCase() and concatenating it with the rest of the word using slice(1).

1. Joining the Words:

.join(' ');        

• We use join(' ') to combine the capitalized words into a single sentence with a space between each word.

1. Testing the Function:

const result = createSentence(["the", "quick", "brown", "fox"]);

console.log(result); // "The Quick Brown Fox"        

• We test the function with the array ["the", "quick", "brown", "fox"]. The function returns "The Quick Brown Fox", a properly capitalized sentence.

References:

1. Some of the concepts and challenges presented in this article are inspired by common problems found on coding platforms such as LeetCode and HackerRank. These platforms are excellent resources for developers looking to improve their problem-solving skills in string manipulation and other coding topics.