JavaScript Methods for Searching Strings

Need to check whether a JavaScript string contains a specific character or substring? Or maybe you need to know where it appears in the string. In any event, JavaScript offers several ways to accomplish both these objectives. This web development tutorial will present an overview of the String’s many methods as well as some examples of how to use the string object’s methods dedicated to finding a substring within another string.

Read: Top HTML and CSS Online Courses for Web Developers

JavaScript String Methods

Take a look at the full list of string methods below and you will notice that there are more methods for searching than any other purpose, which highlights their importance:

Searching

• search(): searches for specified value in the string
• indexOf(): returns the first index of occurrence of a value
• lastIndexOf(): returns the last index of occurrence of a value
• includes(): checks if given string is found inside a string
• startsWith(): checks if a string begins with a specified string
• endsWith(): checks if a string ends with a specified string
• match(): returns result of matching string with a regex
• matchAll(): returns iterator of results matching with a regex

Trimming

• trim(): removes whitespace from both ends of a string
• trimStart(): removes whitespace from the beginning of a string
• trimEnd(): removes whitespace from the end of a string

Padding

• padStart(): pads a string at the start to a given length
• padEnd(): pads a string at the end to a given length

Extracting

• split(): returns the string divided into list of substring
• substring()/substr(): return a specified part of the string
• slice(): extracts and returns a section of the string

Concatenating

• concat (): concatenates the arguments to the calling string

Replacing

• replace(): replaces a substring/pattern in the string
• replaceAll(): returns string by replacing all matching patterns

Changing Case

• toUpperCase(): returns uppercase of a string
• toLowerCase(): returns lowercase representation of a string

Characters and Unicode

• charAt(): returns character at a specified index in string
• charCodeAt(): returns Unicode of the character at given index
• fromCharCode(): returns a string from the given UTF-16 code units
• codePointAt(): returns the Unicode point value at given index
• fromCodePoint(): returns a string using the given code points

Miscellaneous JavaScript String Search Methods

• localeCompare(): compares two strings in the current locale
• repeat(): returns a string by repeating it given times

Read: Best Online Courses to Learn JavaScript

Working with the JavaScript String Object’s Search Methods

In this section of our JavaScript String method tutorial, we will go over each of the methods listed in the Searching category above and cover their syntax and usage.

search()

The search() method matches a string against a regular expression or string searchValue. In the case of the latter, the string is converted to a regular expression by the method before proceeding with the search. The search() method returns the index (position) of the first match (starting from 0) or -1 if no match is found. The search() method is case sensitive unless the i flag is included in the regular expression.

Syntax of search() Method in JavaScript

string.search(searchValue)

Examples of search() Method in JavaScript

let text = "Please locate where 'locate' occurs!";
// 1st instance of "locate"
document.writeln(text.search("locate")); // 7

text="The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?";
// Any character that is not a word character or whitespace
document.writeln(text.search(/[^\w\s]/g)); // 43

text = "Mr. Blue has a blue house";
// Case insensitive search for "blue"
document.writeln(text.search(/blue/i)); // 4

indexOf()/lastIndexOf() Method in JavaScript

The indexOf() and lastIndexOf() methods return the index of (position of) the first and last occurrence of a string in a string respectively or -1 if no match is found.

Syntax of indexOf()/lastIndexOf() Method

string.indexOf(searchValue)
string.lastIndexOf(searchValue)

Examples of indexOf()/lastIndexOf() Method

let text = "Please locate where 'locate' occurs!";
text.indexOf("locate");     // 7
text.lastIndexOf("locate"); // 21
text.lastIndexOf("text");   // -1 (not found)

The Difference Between search() and indexOf()

The search() and indexOf() methods are strikingly similar, albeit with a couple of notable differences:

• The search() cannot take a start position argument.
• The indexOf() method cannot search using a regular expression.

includes() Method in JavaScript

The includes() method returns true if a string contains a specified string value. Otherwise it returns false.

Syntax of includes() Method

string.includes(searchValue)

Examples of include() Method

let text = "Please locate where 'locate' occurs!";
text.includes("locate"); // true
text.includes("find");   // false

Note that the includes() method is an ES6 feature and is not supported in Internet Explorer.

startsWith()/endsWith() Method in JavaScript

The startsWith() and endsWith() methods return true if a string begins or ends with a specified value, respectively. Otherwise, false is returned.

Syntax of startsWith()/endsWith() Method

string.startsWith(searchValue)
string.endsWith(searchValue)

Examples of startsWith()/endsWith() Method

let text = "Please locate where 'locate' occurs!";
text.startsWith("Please"); // true
text.startsWith("locate"); // false

text.endsWith("occurs!"); // true
text.endsWith("locate");  // false

Note that the startsWith() and endsWith() methods are an ES6 feature and are not supported in Internet Explorer.

match()/matchAll() Method in JavaScript

Both the match() and matchAll() methods return the results of matching a string against a supplied string or regular expression. The difference is that match() returns the results in an array while matchAll() returns an iterator. Introduced in ES6, iterators allow you to iterate over any object that follows the Iterator specification.

Syntax of match()/matchAll()

string.match(searchValue)
string.matchAll(searchValue)

Examples of match()/matchAll()

let text = "Please locate where 'locate' occurs!";
text.match("cat"); // [cat]
text.match(/cat/g); // [cat, cat]

text.matchAll("occurs!"); // Iterator with 1 result
text.matchAll("locate");  // Iterator with 2 results

Note that the matchAll() method is an ES2020 feature and are definitely not supported in Internet Explorer.

Read: Top Collaboration Tools for Web Developers

How to Invoke a String Method in JavaScript

The JavaScript string is a data type unlike any other in that it can be treated as either a primitive or object depending on whether it is assigned as a string literal or created using the String constructor. Does that mean that primitive Strings do not have access to the String object’s many useful methods? Not at all. Whenever a method is invoked on a primitive string, JavaScript will automatically wrap the string primitive and call the method on the wrapper object instead. So, however you create your strings, you can always access their methods.

You can see all of the methods from this tutorial in action in the codepen demo.

Final Thoughts on JavaScript Methods for Searching Strings

This web development tutorial presented an overview of JavaScript’s String’s many methods as well as some examples of how to use them. In the next installment, we will be taking a look at the trimming, padding, extracting, and concatenating methods of the String object. That will leave the remaining methods for the third and final installment.