Quick Reach
The substring method
The substring method is used to get substring of a given string by specifying start and end numbers. The starting index is the number of character in the given string that will be included to get substring. Whereas end number will not be included in substring, javascript method.
Syntax of javascript substring
Following is the syntax to use substring method:
Str.substring(start_index, end_index);
A substring example
A few points about substring JS method are:
- start_index is mandatory, that specifies where to start extracting a substring.
- end_index is optional, if not specified the substring will go to the end of given string.
- if start_index is greater than end_index value the order will be inverted i.e. end_index becomes start index.
- The original string remains the same after using substring method.
e.g. str_substring = str(5,10);
Let us look at a few examples of using substring in javascript.
substring example with both indices
Following example uses both indices in substring method. We will specify start and end index to a string variable and assign it to another string variable. As you click on the button “Show Substring” it will show substring value.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show Substring</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string tutorial!”);
var str_substring = str.substring(5,18);
alert (“The string after substring function: n” + str_substring);
}
</script>
</body>
</html>
|
As you can see, we used 5 and 18 indices that returned “is javascript” substring from original string.
Substring javascript example with start index only
Now we will use only start index in the substring method. This should return remaining string after start value. See example by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show Substring</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string tutorial!”);
var str_substring = str.substring(5);
alert (“The string after substring function: n” + str_substring);
}
</script>
</body>
</html>
|
As you can see, we just given starting index 5 and remaining substring is returned as “is javascript string tutorial!”.
Javascript string substring example with greater end index
As mentioned earlier, when given end index in string substring method is greater than the start index then the order will be inverted, i.e. end index becomes starting index while start value becomes end index. See example by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show JS Substring</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string tutorial!”);
var str_substring = str.substring(18,5);
alert (“The string after substring function: n” + str_substring);
}
</script>
</body>
</html>
|
As you can see the index numbers are given as str.substring(18,5) in javascript substring method. While the alert is showing returned string as this: str.substring(5,18).
substring with negative number example
If a negative number is given in the substring method then it will be taken as zero. Following example uses -10 for start index:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<button onclick=“showalert()”>Show JS Substring</button>
<script type=“text/javascript”>
function showalert(){
var str = (“This is javascript string tutorial!”);
var str_substring = str.substring(–10, 15);
alert (“The string after substring function: n” + str_substring);
}
</script>
</body>
</html>
|
As you can see, the returned substring is started from beginning to 14 characters.
Also see Javascript String | Javascript array
Leave A Comment?