Substring Search Patterns in DSA Javascript - Build from Scratch

Substring Search Patterns

📖 Scenario: Imagine you are building a simple search feature for a small library website. Users can type a word or phrase, and you want to find all the books whose titles contain that word or phrase.

🎯 Goal: Build a program that searches for a given substring inside a list of book titles and returns all titles that contain that substring.

📋 What You'll Learn

Create an array called bookTitles with exact book title strings

Create a variable called searchTerm with the exact substring to search

Use a for loop with variable title to iterate over bookTitles

Use the includes() method to check if title contains searchTerm

Collect matching titles in an array called matchingTitles

Print the matchingTitles array at the end

💡 Why This Matters

🌍 Real World

Searching for substrings in text is common in search engines, filtering lists, and autocomplete features on websites and apps.

💼 Career

Understanding substring search helps in building search functionalities, text processing, and data filtering in software development roles.

1

Create the list of book titles

Create an array called bookTitles with these exact strings: 'The Great Gatsby', 'Great Expectations', 'The Grapes of Wrath', 'Gone with the Wind', 'The Wind in the Willows'

DSA Javascript

// Create the array bookTitles with the given book titles
// Your code here

Hint

Use square brackets [] to create an array and separate strings with commas.

2

Set the search term

Create a variable called searchTerm and set it to the string 'Great'

DSA Javascript

const bookTitles = ['The Great Gatsby', 'Great Expectations', 'The Grapes of Wrath', 'Gone with the Wind', 'The Wind in the Willows'];
// Create the variable searchTerm with the value 'Great'
// Your code here

Hint

Use const to create a variable and assign the string 'Great'.

3

Find matching titles

Create an empty array called matchingTitles. Use a for loop with variable title to iterate over bookTitles. Inside the loop, use if (title.includes(searchTerm)) to check if title contains searchTerm. If yes, add title to matchingTitles using matchingTitles.push(title).

DSA Javascript

const bookTitles = ['The Great Gatsby', 'Great Expectations', 'The Grapes of Wrath', 'Gone with the Wind', 'The Wind in the Willows'];
const searchTerm = 'Great';
// Create an empty array matchingTitles
// Use a for loop with variable title to iterate over bookTitles
// Inside the loop, check if title.includes(searchTerm)
// If yes, push title into matchingTitles
// Your code here

Hint

Remember to create an empty array before the loop. Use for (const title of bookTitles) to loop. Use includes() to check substring.

4

Print the matching titles

Write a console.log statement to print the matchingTitles array.

DSA Javascript

const bookTitles = ['The Great Gatsby', 'Great Expectations', 'The Grapes of Wrath', 'Gone with the Wind', 'The Wind in the Willows'];
const searchTerm = 'Great';
const matchingTitles = [];
for (const title of bookTitles) {
    if (title.includes(searchTerm)) {
        matchingTitles.push(title);
    }
}
// Print the matchingTitles array
// Your code here

Hint

Use console.log(matchingTitles) to display the array of matching titles.

Practice

1. What does the indexOf method do when used on a string in JavaScript?

easy

A. Converts the string to uppercase

B. Replaces a substring with another string

C. Splits the string into an array of substrings

D. Finds the position of the first occurrence of a substring

Solution

1. Step 1: Understand the purpose of indexOf

   The indexOf method searches a string for a specified substring and returns the position of its first occurrence.

2. Step 2: Confirm behavior on strings

   If the substring is found, it returns the zero-based index; if not found, it returns -1.

3. Final Answer:

   Finds the position of the first occurrence of a substring -> Option D

4. Quick Check:

   indexOf = position of substring [OK]

Hint: Remember: indexOf returns position or -1 if not found [OK]

Common Mistakes:

• Confusing indexOf with replace method
• Thinking indexOf splits the string
• Assuming indexOf changes the string case

2. Which of the following is the correct syntax to check if the substring 'cat' exists in the string text using includes method?

easy

A. text.include('cat')

B. includes(text, 'cat')

C. text.includes('cat')

D. text.contains('cat')

Solution

1. Step 1: Recall the correct method name

   The correct method to check substring presence is includes, called on the string object.

2. Step 2: Verify syntax

   The syntax is string.includes(substring), so text.includes('cat') is correct.

3. Final Answer:

   text.includes('cat') -> Option C

4. Quick Check:

   Correct method call syntax = text.includes('cat') [OK]

Hint: Use string.includes(substring) to check presence [OK]

Common Mistakes:

• Using wrong method name like include or contains
• Calling includes as a standalone function
• Passing arguments in wrong order

3. What will be the output of the following code?

const text = 'hello world';
const pos = text.indexOf('o');
console.log(pos);

medium

A. 4

B. 5

C. -1

D. 6

Solution

1. Step 1: Identify the string and substring

   The string is 'hello world' and the substring searched is 'o'.

2. Step 2: Find the first occurrence of 'o'

   Counting from zero: h(0) e(1) l(2) l(3) o(4) (space 5) w(6) o(7). The first 'o' is at index 4.

3. Step 3: Verify the output

   The code uses indexOf('o') which returns the first occurrence index, which is 4.

4. Final Answer:

   4 -> Option A

5. Quick Check:

   First 'o' index = 4 [OK]

Hint: Count string index from zero to find first substring position [OK]

Common Mistakes:

• Counting index starting from 1 instead of 0
• Confusing second 'o' position with first
• Assuming indexOf returns -1 if substring exists

4. The following code is intended to check if the substring 'test' exists in str. What is the error?

const str = 'this is a test';
if (str.indexOf == 'test') {
  console.log('Found');
} else {
  console.log('Not Found');
}

medium

A. The variable str is not declared properly

B. indexOf is used without parentheses, so it compares function to string

C. The if condition should use === instead of ==

D. The substring 'test' is misspelled

Solution

1. Step 1: Analyze the use of indexOf

   The code uses str.indexOf without parentheses, so it refers to the function itself, not the result of calling it.

2. Step 2: Understand the comparison

   Comparing a function to a string ('test') is always false, so the condition is incorrect.

3. Final Answer:

   indexOf is used without parentheses, so it compares function to string -> Option B

4. Quick Check:

   Missing parentheses on indexOf causes error [OK]

Hint: Always call indexOf with parentheses and substring argument [OK]

Common Mistakes:

• Forgetting parentheses on indexOf
• Using wrong comparison operator
• Assuming indexOf returns boolean directly

5. You want to find all starting positions of the substring 'ana' in the string 'banana'. Which approach correctly finds all positions?

hard

A. Use a loop with indexOf and update the start position after each find

B. Use includes repeatedly until it returns false

C. Use lastIndexOf to find all positions from the end

D. Use replace to remove substring and count occurrences

Solution

1. Step 1: Understand the problem of multiple occurrences

   To find all positions, you must repeatedly search starting after the last found position.

2. Step 2: Use a loop with indexOf and update start

   Use indexOf('ana', start) in a loop, updating start to position + 1 each time until no more found.

3. Final Answer:

   Use a loop with indexOf and update the start position after each find -> Option A

4. Quick Check:

   Loop + indexOf with updated start = all positions [OK]

Hint: Loop with indexOf(start) to find all substring positions [OK]

Common Mistakes:

• Using includes which returns only true/false
• Using lastIndexOf which finds only last occurrence
• Using replace which changes string and loses positions