Article Categories

Selected Reading

How to search for a string in JavaScript?

Javascript Web Development Front End Technology

JavaScript provides several methods to search for strings. The most common approaches are search(), indexOf(), includes(), and match().

Using search() Method

The search() method returns the index of the first match or -1 if not found. It supports regular expressions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Search Example</title>
</head>
<body>
    
    The spring season is about to come.
    
    <button id="searchBtn">SEARCH FOR 'spring'</button>
    
    <script>
        let btnEle = document.getElementById("searchBtn");
        let sampleText = document.getElementById("sample").textContent;
        let resEle = document.getElementById("result");
        
        btnEle.addEventListener("click", () => {
            let position = sampleText.search("spring");
            if (position !== -1) {
                resEle.textContent = "The string 'spring' is found at position " + position;
            } else {
                resEle.textContent = "String not found";
            }
        });
    </script>
</body>
</html>

Using indexOf() Method

The indexOf() method works similarly but only accepts literal strings, not regular expressions.

<!DOCTYPE html>
<html>
<body>
    <script>
        let text = "The spring season is about to come.";
        let position = text.indexOf("spring");
        console.log("Position of 'spring':", position);
        
        // Case-sensitive search
        console.log("Position of 'Spring':", text.indexOf("Spring"));
        
        // Starting from a specific position
        console.log("Search from index 10:", text.indexOf("s", 10));
    </script>
</body>
</html>

Position of 'spring': 4
Position of 'Spring': -1
Search from index 10: 12

Using includes() Method

The includes() method returns true or false instead of position.

<!DOCTYPE html>
<html>
<body>
    <script>
        let text = "The spring season is about to come.";
        
        console.log("Contains 'spring':", text.includes("spring"));
        console.log("Contains 'winter':", text.includes("winter"));
        console.log("Contains 'SPRING':", text.includes("SPRING"));
    </script>
</body>
</html>

Contains 'spring': true
Contains 'winter': false
Contains 'SPRING': false

Using match() with Regular Expressions

The match() method is powerful for pattern-based searches and returns detailed results.

<!DOCTYPE html>
<html>
<body>
    <script>
        let text = "The spring season is about to come.";
        
        // Case-insensitive search
        let result1 = text.match(/spring/i);
        console.log("Case-insensitive match:", result1 ? result1[0] : "Not found");
        
        // Global search for all vowels
        let vowels = text.match(/[aeiou]/gi);
        console.log("All vowels found:", vowels);
        
        // Find words starting with 's'
        let wordsWithS = text.match(/\bs\w*/gi);
        console.log("Words starting with 's':", wordsWithS);
    </script>
</body>
</html>

Case-insensitive match: spring
All vowels found: ["e", "i", "e", "a", "o", "i", "a", "o", "u", "o", "o", "e"]
Words starting with 's': ["spring", "season"]

Comparison

Method	Returns	Regular Expressions	Case Sensitive
`search()`	Index or -1	Yes	Yes (unless regex flag)
`indexOf()`	Index or -1	No	Yes
`includes()`	Boolean	No	Yes
`match()`	Array or null	Yes	Yes (unless regex flag)

Conclusion

Use includes() for simple existence checks, indexOf() or search() for position-based searches, and match() for complex pattern matching with regular expressions.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

316 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next