How to Set an HTML Element’s Class Using JavaScript
The HTML class attribute is used to mark individual elements with a class, distinguishing it from other elements in the document. This allows front-end web developers
Tip: To find the last index of an element, see the lastIndexOf() method.
The below example shows how to use indexOf() with an array:
const fruits = ['apple', 'orange', 'banana', 'apple', 'pear']; console.log(fruits.indexOf('apple')); // Expected output: 0
In the example above, we scanned the fruits array for the value apple. While apple appears twice in the array, indexOf only returns the index of the first occurrence of the string. As array indices begin at zero, the value 0 is returned.
The below example demonstrates how to use indexOf() with a string:
const str = 'How much wood would a woodchuck chuck'; console.log(str.indexOf('wood')); // Expected output: 9
The code sample above searches the sentence stored in const str for the term wood. The first appearance of this term begins at index 9, despite there being two occurrences of the term “wood” in the string, and thus the value 9 is returned.
The syntax for using indexOf() is as follows:
String or Array.indexOf(searchValue, fromIndex)
Let’s explore the components of this call below.
SearchValue
The searchValue parameter is the value that we wish to search for. This parameter is used somewhat differently between Strings and Arrays.
For Strings, searchValue can be any fraction of the string – even a single character.
console.log(str.indexOf('w')); //Expected output: 2
For Arrays, the comparison of the searchValue to each array element is performed using the strict equality operator (===). Thus, you must provide the exact value of the item you are searching for when searching Arrays.
console.log(fruits.indexOf('appl')); // Expected output: -1
As we see above, because we did not find an exact match the indexOf() call returned a value of -1, indicating no match was found.
fromIndex
The fromIndex parameter simply defines the index from which the search will begin.
Using this parameter enables us to locate other occurrences of a term or an item that appear after the first occurrence.
console.log(fruits.indexOf('apple', 1)); // Expected output: 3
In the example above, indexOf() will begin its search from index 1, skipping over the first “apple” in the array. As we began the search at index 1, the next occurrence of the word “apple” is returned – this occurs at index 3.
const str = 'How much wood would a woodchuck chuck'; console.log(str.indexOf('wood', 10)); // Expected output: 22
In the example above, even though the term wood does not appear independently for the second time, it is included as a part of the word woodchuck. If you add a blank space at the end of the searchValue parameter, you will limit your search to whole words, but words that are followed by a comma (or any other punctuation mark) will not be found.
Note: The indexOf() method is case sensitive.
Note: Do not confuse the indexOf() method with the findIndex() method.
Both are applicable for Arrays, but while indexOf() searches for a specific value in a given array, findIndex() uses a callback function to test whether or not an array item satisfies a condition.
Related Articles
JavaScript – How to Use the Array filter() method
The HTML class attribute is used to mark individual elements with a class, distinguishing it from other elements in the document. This allows front-end web developers
In JavaScript, an Object is a special kind of data type. This article provides an introduction to one of JavaScript’s most important data types. One that
A for loop will repeatedly execute a function or a code block until a provided condition evaluates to false. Basic for loop example Let’s begin