Search and Replace - JavaScript Solution & Walkthrough

07/21 Search and Replace

Perform a search and replace on the sentence using the arguments provided and return the new sentence.

First argument is the sentence to perform the search and replace on.

Second argument is the word that you will be replacing (before).

Third argument is what you will be replacing the second argument with (after).

Note: Preserve the case of the first character in the original word when you are replacing it. For example if you mean to replace the word Book with the word dog, it should be replaced as Dog

function myReplace(str, before, after) {

  return str;
}

myReplace("A quick brown fox jumped over the lazy dog", "jumped", "leaped");

Credit: FreeCodeCamp.org

Understanding the Challenge

Just like the name suggests, this challenge requires us to search and replace a string in a sentence. The myReplcace function takes 3 arguments.

The first is sentence str.

The second argument before is a string. This string is present in the given sentence str. And it is the word that we will be replacing.

The third argument after is a string. This is what we will use to replace before in the given sentence.

Let's look at an example to make things clearer. Let's say we are given the following arguments.

myReplace("Go to the Store", "Store", "mall")

Given these arguments, the function should return "Go to the Mall". So the word "Store" has been replaced with the word "Mall".

The challenge description provides a note that we are to preserve the case of the first character of the original word we're replacing. Going back to our example. The original word we are replacing is "Store". The first character is an upper case "S". However, the word we are using to replace "mall" starts with a lower case "m". Since, the challenge expects us to preserve the case, we replaced "Store" with "Mall"(upper case M) and not "mall"(lower case m)

I hope that explanation was clear. If you need to read over again to get a better understanding, I encourage you to do so. Once you are ready, let's proceed.

Pseudocode

Given 3 strings
i. A sentence (str)
ii. A word to be replaced (before)
iii. A replacing word (after)
   First, check whether the first letter of before is lower case or upper case
   If it is lower case
      Replace (before) with (after).
      Make sure first letter of after is in lower case
      Return resulting sentence
   If it is upper case
      Replace (before) with (after).
      Make sure first letter of after is in upper case
      Return resulting sentence

Solving the Challenge

First, let's declare a variable that will hold the final string to be returned. Let's call it finalStr. And we will set its initial value to an empty string.

let finalStr = "";

The next to do is to get the first character of both before and after and save them in a string.

const firstB = before[0];
const firstA = after[0];

The challenge expects us to preserve the case of the first letter of before. So what we need to do now is to check whether the first letter of before which is now held is firstB is a lower case or upper case.

One way to do that is to compare firstB with firstB converted to a lower case. If it returns true, it means firstB is lower case. If it returns false, it means firstB is upper case.

firstB === firstB.toLowerCase()

The code snippet above will help us check if the first letter of before is lower case or upper case.

If it is lower case, we want to replace before in str with after. But the first character of after should be lower case. In other words, if firstB is lower case, the finalStr should be equal to the code snippet below.

finalStr = str.replace(before, firstA.toLowerCase() + after.substring(1));

let's break down what is happening.

We know the firstB is a lower case. So we are doing here is to replace before with firstA.toLowerCase() + after.substring(1). firstA.toLowerCase() will convert the first charact of after to a lower case. And using the .substring() method, we concatenate it with the remaining letters in after. Using 1 as an argument for substring, we'll get all the letters of after starting the letter at index 1. Note, we already have the first letter at index 0, converted to lower case.

We will do something if firstB is an upper case.

finalStr = str.replace(before, firstA.toUpperCase() + after.substring(1))

To put it together, we can use either the if else or the tenary operator.

  firstB === firstB.toLowerCase()
  ? finalStr = str.replace(before, firstA.toLowerCase() + after.substring(1))
  : finalStr = str.replace(before, firstA.toUpperCase() + after.substring(1))

We can now return finalStr and our function is complete!

return finalStr;

Final Solution

function myReplace(str, before, after) {
  let finalStr = "";
  let firstB = before[0];
  let firstA = after[0];

  firstB === firstB.toLowerCase()
  ? finalStr = str.replace(before, firstA.toLowerCase() + after.substring(1))
  : finalStr = str.replace(before, firstA.toUpperCase() + after.substring(1))

  return finalStr;
}

myReplace("A quick brown fox jumped over the lazy dog", "jumped", "leaped");

Congratulations!

You just cracked the seventh challenge in this series.

Cheers and happy coding!

Useful Links

• Tutorial on the Tenary Operator