Hello, and welcome to our analysis lesson. In this lesson, we will be tackling a common problem in the field of string manipulations with JavaScript. We will learn how to find all occurrences of a substring within a larger string. The techniques you will master today can be utilized in numerous situations, such as text processing and data analysis. Are you ready to get started? Let's jump right in!

Here is this unit's task: We have two lists of strings, both of identical lengths — the first containing the "original" strings and the second containing the substrings. Our goal is to detect all occurrences of each substring within its corresponding original string and, finally, return a list that contains the starting indices of these occurrences. Remember, the index counting should start from 0.

Example

Let's consider the following lists: Original List: { "HelloWorld", "LearningJava", "GoForBroke", "BackToBasics" } Substring List: { "loW", "ear", "o", "Ba" }.

The following are the expected outputs: In "HelloWorld", "loW" starts at index 3. In "LearningJava", "ear" starts at index 1. In "GoForBroke", "o" appears at indices 1, 3, and 7. In "BackToBasics", "Ba" starts at indices 0 and 6.

Thus, when findSubString(["HelloWorld", "LearningJava", "GoForBroke", "BackToBasics"], ["loW", "ear", "o", "Ba"]) is invoked, the function should return:

Plain text
Copy to clipboard
1[
2    "The substring 'loW' was found in the original string 'HelloWorld' at position(s) 3.",
3    "The substring 'ear' was found in the original string 'LearningJava' at position(s) 1.",
4    "The substring 'o' was found in the original string 'GoForBroke' at position(s) 1, 3, 7.",
5    "The substring 'Ba' was found in the original string 'BackToBasics' at position(s) 0, 6."
6]

Although this task may seem fairly straightforward, it can prove challenging. However, don't worry! We will break it down step by step.

Initially, we need to create a space to store our results. Can you think of a JavaScript data type that would be ideal for this task? That's right! An array would be perfect!

JavaScript
Copy to clipboard
1function findSubString(origStrs, substrs) {
2    let result = [];

To pair original strings with their substrings, we use a simple for loop. In our case, both lists share the same length, so we can use their indices to pair them correctly. To find the first occurrence of each substring in the corresponding original string, we utilize the indexOf method:

JavaScript
Copy to clipboard
1    for (let i = 0; i < origStrs.length; i++) {
2        let start_pos = origStrs[i].indexOf(substrs[i]);

In string.indexOf(substr), we provide the substring that we intend to locate. The function starts its search from the beginning because we have not specified a starting position.

The next step is to find the subsequent instances of the substring in the original.

To do this, we will use a while loop. But when should we stop looking for more occurrences? When our indexOf function returns -1, it indicates there are no more matches to be found.

In string.indexOf(substr, startPos), the startPos parameter specifies the position in the string at which to start the search. By updating startPos after each match, we ensure that the search continues from the correct position for subsequent occurrences.

Each time we locate a match, we record its starting index in the match_indices array, adjust the start_pos, and begin the search anew:

JavaScript
Copy to clipboard
1        let match_indices = [];
2        while (start_pos !== -1) {
3            match_indices.push(start_pos);
4            start_pos = origStrs[i].indexOf(substrs[i], start_pos + substrs[i].length);
5        }

Finally, we can format the result using template literals for improved readability and add it to the result list:

JavaScript
Copy to clipboard
1        if (match_indices.length > 0) {
2            let positions = match_indices.join(", ");
3            let resultString = `The substring '${substrs[i]}' was found in the original string '${origStrs[i]}' at position(s) ${positions}.`;
4            result.push(resultString);
5        }
6    }
7    return result;
8}

That's it! We have completed the design of our function.

Here is the complete function, incorporating all the steps we have discussed so far:

JavaScript
Copy to clipboard
1function findSubString(origStrs, substrs) {
2    let result = [];
3
4    for (let i = 0; i < origStrs.length; i++) {
5        let start_pos = origStrs[i].indexOf(substrs[i]);
6        let match_indices = [];
7
8        while (start_pos !== -1) {
9            match_indices.push(start_pos);
10            start_pos = origStrs[i].indexOf(substrs[i], start_pos + substrs[i].length);
11        }
12
13        if (match_indices.length > 0) {
14            let positions = match_indices.join(", ");
15            let resultString = `The substring '${substrs[i]}' was found in the original string '${origStrs[i]}' at position(s) ${positions}.`;
16            result.push(resultString);
17        }
18    }
19    return result;
20}
21
22// Call the function
23let result = findSubString(
24    ["HelloWorld", "LearningJava", "GoForBroke", "BackToBasics"],
25    ["loW", "ear", "o", "Ba"]
26);
27result.forEach(res => console.log(res));
28// Output:
29// The substring 'loW' was found in the original string 'HelloWorld' at position(s) 3.
30// The substring 'ear' was found in the original string 'LearningJava' at position(s) 1.
31// The substring 'o' was found in the original string 'GoForBroke' at position(s) 1, 3, 7.
32// The substring 'Ba' was found in the original string 'BackToBasics' at position(s) 0, 6.

Well done! You've mastered a central operation in string manipulations in JavaScript — finding all occurrences of a substring in another string. Keep in mind that this algorithm has numerous applications in real-world scenarios. Now that we have intricately dissected the problem and provided a detailed solution, I encourage you to practice more. Future exercises will help you hone your skills further. Keep on coding and exploring!