Basics of Javascript · String · search() (method)
This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.
Hello my fellow developers! We are going to do a little bit of searching in today’s episode. But this time, we will use only regular expressions.
The search() method searches a string for a specified value, and returns the position of the match. The search value can be a string or a regular expression. If string is provided as an input parameter, it will be automatically converted to a regular expression. The method returns -1 if no match is found.
Let’s try some simple basic scenarios in example number 1.
const str = "Blue sweater itches. I'll wear a red t-shirt and a blue jeans.";// string that will be converted to RegExp internally
let blue = "blue";
str.search(blue) // 51// same as previous but explicitly RegExp
let regExp = /blue/;
str.search(regExp) // 51// RegExp without case-sensitivity
let regExpIns = /blue/i;
str.search(regExpIns) // 0// string that is not present in the searched string
let green = "green";
str.search(green) // -1
The first case is a simple string as an input parameter. First occurrence of the “blue” string is at position 51. The next case is literally the same thing, but we do not let Javascript do the conversion to RegExp internally, but we directly provide the RegExp ourselves.
Third case is finding without case-sensitivity which leads to the first word of the sentence to be found at position 0. The last case covers situations when a searched string or RegExp is not present. We get -1.
It might be an over exaggeration, but there are a ton of methods in String that can do virtually the same. But there are minor differences and different limitations to each of them. Let’s see a comparison of methods that are somehow similar to search and let’s compare them to each other.
// exec()
/blue/.exec(str) // Array ["blue", ..., index: 51]
/blue/i.exec(str) // Array ["Blue", ..., index: 51]// indexOf()
str.indexOf("blue") // 51// match()
str.match("blue") // Array ["blue", ..., index: 51]
str.match(/blue/i) // Array ["Blue", ..., index: 51]
str.match(/blue/gi) // Array ["Blue", "blue"]// matchAll()
...str.matchAll("blue") // Array ["blue", ..., index: 51]
...str.matchAll(/blue/g) // Array ["blue", ..., index: 51]
...str.matchAll(/blue/gi); // 2 arrays (see below)// Array ["blue", ..., index: 51]
// Array ["Blue", ..., index: 0]// search()
str.search("blue") // 51
str.search(/blue/) // 51
str.search(/blue/i) // 0
There are other methods that can get you the same information as the search() method. That is the position of the first occurrence of the match in the searched string. Three of these methods belong to String object. One belongs to the RegExp object, but we already mentioned it before. Let’s look at them one by one.
The exec() method belongs to the RegExp object, but we already covered it with match and matchAll() methods. It can provide us with the index of the match as an extra property in the array of matches.
The method that is probably the closest to our search() method is the indexOf() method. It also outputs only the index of the match, but unfortunately it can not work with regular expressions.
Both match() and matchAll() methods can get us the same information as an extra property of an array with matches. The limitation is that if we use the global flag with the match() method, we only get the matches without additional information. Limitation of the matchAll() is that it requires a global flag and therefore finds more than we might need.
With the correct setup, we can get the same result with any of these 5 methods. But each of them is suited best for different scenarios and we as developers should honor that and always try to use the best tool for the job. But if we don’t, it’s not going to be the end of the world. As I always say — let’s first make it work, then we make it nice.
So, that’s it for the search method. It was once again one of the rather simple and straightforward methods. At least when we consider all the crazy stuff we had to deal with before. As always — thanks for the attention and I will see you with the next method soon.
