Searching a String in ECMAScript

The ECMAScript String Object – Part 4

ECMAScript 6

Foreword: In this part of the series I explain how to search a string in ECMAScript.

By: Chrysanthus Date Published: 14 Jul 2016

Introduction

This is part 4 of my series, The ECMAScript String Object. In this part of the series I explain how to search a string in ECMAScript. The methods involved are of the String Object prototype; however they are very easy to learn. You should have read the previous parts of the series before reaching here, as this is a continuation.

The indexOf Method
The syntax for this method is:

    stringObject.indexOf (searchString, index)

Imaging that you have a long string, say a long sentence. You may want to know if a phrase (substring) is in the string. This phrase is searchString in the syntax. Every character in a string is indexed; the first character is at index 0, the second is at index 1, the third is at index 2, and so on. In the syntax, index is where the search should begin. The index argument is actually optional. When absent, the whole string is searched, meaning the index defaults to zero. The searchString is typed in quotes.

The index of a substring is the index of the first character of the substring. In the search, many substrings may exist. The method returns the index of the first substring found. If searchString is not found, -1 is returned. The search is case sensitive. Read and try the following code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

    <script type="text/ECMAScript">

        strObj = new String("We are the world. We are the children. We are the ones.");

        indx = strObj.indexOf("We", 15);

        alert(indx);

    </script>

</body>
</html>

The extra HTML code is to produce a web page. The index given at which to start the search is 15 for the letter, d in “world”.

Use of Literal in Place of Object
For all the methods in this part of the series, you can actually use the string literal in place of the string object. “Using the literal” means using the literal itself, or an identifier representing the literal (not representing a string object). Read and try the following code:

    <script type="text/ECMAScript">

        str = "We are the world. We are the children. We are the ones.";

        indx = str.indexOf("We", 15);

        alert(indx);

    </script>

The same result is returned as of the above; the code is the same except that the string object has been replaced by the string literal.

The lastIndexOf Method
The syntax for this method is:

    stringObject.lastIndexOf (searchString, index)

This method is the same as the indexOf() method. However, this method will return the index of the last substring found, and not the first. If there is only one substring, it still returns that index. Note: the argument for index here, gives the position at which the search ends, from the left string end; if it is absent, then the whole string is searched. Read and try the following code:

    <script type="text/ECMAScript">

        strObj = new String("We are the world. We are the children. We are the ones.");

        indx = strObj.lastIndexOf ("We", 44);

        alert(indx);

    </script>

The output is 39 for the last “We” and the index is for e in the last “are”.

The search Method
The search method is similar to the indexOf method, but here, the whole string is searched and it is the index of the first match from left, that is returned. If the searched substring is not found, -1 is returned. The syntax is:

    stringObject.search(regexp)

Read and try the following code:

    <script type="text/ECMAScript">

        strObj = new String("we are the world. We are the children. We are the ones.");

        indx = strObj.search("We");

        alert(indx);

    </script>

The output is 18. The search method is case sensitive. In the object string, the first “we” has ‘w’ in lowercase and the second “We” has ‘w’ in uppercase. Because of the case sensitivity of the method, the second “We” is found. Remember, it is the index of the first character of the substring that is returned.

The match Method
The match method is similar to the search method by searching the whole string, and matching the first occurrence of the substring. It is also case sensitive. However, if the substring is found, the found substring is returned; if the substring is not found, null is returned. The syntax is:

    stringObject.match(regexp)

Read and try the following code, where because of case sensitivity, the first code segment sees the last substring occurrence and the second code segment sees nothing (because of case sensitivity):

    <script type="text/ECMAScript">

        strObj = new String("we are the world. we are the children. We are the ones.");
        substr = strObj.match("We");
        alert(substr);

        str = "we are the world. we are the children. we are the ones.";
        substrB = str.match("We");
        alert(substrB);

    </script>

The output gives “We” followed by null.

The replace Method
The replace() method actually does search and replace. It is similar to the search() method by searching the whole string and matches the first occurrence of the substring. It is also case sensitive. When it sees a match, it returns the whole string with the replacement. When it does not see a match it still returns the whole string but without replacement. The syntax is:

    stringObject.replace (searchValue, replaceValue)

replaceValue is the substring for replacement. If absent, the value, undefined is used (for replaceValue). Of course, searchValue is the substring searched. Read and try the following code, where because of case sensitivity, the last “We” and not any of the first two, is changed to “You”.

    <script type="text/ECMAScript">

        strObj = new String("we are the world. we are the children. We are the ones.");
        substr = strObj.replace("We", "You");
        document.write(substr);

    </script>

Note: with the replace() method, the original string remains unchanged.

That is it for this part of the series.

Chrys

Broad Network

Related Articles

Searching a String in ECMAScript

The ECMAScript String Object – Part 4

ECMAScript 6

Introduction

Related Links

Comments