JavaScript String Properties and Methods: indexOf()

The indexOf() method returns the first index of a specified value, or -1 if the value is not found. The indexOf() method starts at a specified index and searches from left to right. By default, the search starts at the first element (index 0) and ends at the last element. Negative start values are counted from the last element, but the search still proceeds from left to right.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexOf()</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .demo-container {
            border: 1px solid greenyellow;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 15px;
        }
        .result {
            color: #2196F3;
            font-weight: bold;
            margin: 10px 0;
        }
        .code-example {
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .true {
            color: #4CAF50;
        }
        .false {
            color: #f44336;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <h3>String Search</h3>
        <div class="code-example">const text = "Welcome to JavaScript tutorial!";</div>
        <div id="stringExamples"></div>
    </div>

    <div class="demo-container">
        <h3>Array Search</h3>
        <div class="code-example">const fruits = ["Apples", "Pears", "Strawberries", "Blueberries", "Bananas"];</div>
        <div id="arrayExamples"></div>
    </div>

    <div class="demo-container">
        <h3>Search from Position</h3>
        <div id="positionExamples"></div>
    </div>

<script>
    const text = "Welcome to JavaScript tutorial!";
    
    document.getElementById("stringExamples").innerHTML = `
        <div class="result">Position of "J": ${text.indexOf("J")}</div>
        <div class="result">Position of "to": ${text.indexOf("to")}</div>
        <div class="result">Position of "z": ${text.indexOf("z")}</div>
    `;

    const fruits = ["Apples", "Pears", "Strawberries", "Blueberries", "Bananas"];
    
    document.getElementById("arrayExamples").innerHTML = `
        <div class="result">Position of "Strawberries": ${fruits.indexOf("Strawberries")}</div>
        <div class="result">Position of "Watermelon": ${fruits.indexOf("Watermelon")}</div>
    `;

    document.getElementById("positionExamples").innerHTML = `
        <div class="code-example">
            fruits.indexOf("Strawberries", 2) // Search from 3rd element
        </div>
        <div class="result">
            Result of searching "Strawberries" from index 2: ${fruits.indexOf("Strawberries", 2)}
        </div>
        <div class="code-example">
            text.indexOf("JavaScript", 15) // Search from 16th character
        </div>
        <div class="result">
            Result of searching "JavaScript" from index 15: ${text.indexOf("JavaScript", 15)}
        </div>
    `;
</script>
</body>
</html>

RESULT