Substrings in JavaScript
The following are the 3 methods in JavaScript that can be used to retrieve a substring from a given string. substring() substr() slice() substring() method : This method has 2 parameters start and end. start parameter is required and specifies the position where to start the extraction. end parameter is optional and specifies the position where the extraction should end. The character at the end position is not included in the substring. If the end parameter is not specified, all the characters from the start position till the end of the string are extracted. If the value of start parameter is greater than the value of the end parameter, this method will swap the two arguments. This means start will be used as end and end will be used as start. Extract the first 10 characters var str = "JavaScript Tutorial"; var result = str.substring(0, 10); alert(result); Output : JavaScript If the value of start parameter is greater than the value of the end parameter, then start will be used as end and end will be used as start var str = "JavaScript Tutorial"; var result = str.substring(10, 0); alert(result); Output : JavaScript substr() method : This method has 2 parameters start and count. start parameter is required and specifies the position where to start the extraction. count parameter is optional and specifies the number of characters to extract. If the count parameter is not specified, all the characters from the start position till the end of the string are extracted. If count is 0 or negative, an empty string is returned. Extract the first 10 characters var str = "JavaScript Tutorial"; var result = str.substr(0, 10); alert(result); Output : JavaScript If the count parameter is not specified, all the characters from the start position till the end of the string are extracted var str = "JavaScript Tutorial"; var result = str.substr(11); alert(result); Output : Tutorial slice() method : This method has 2 parameters start and end. start parameter is required and specifies the position where to start the extraction. end parameter is optional and specifies the position where the extraction should end. The character at the end position is not included in the substring. If the end parameter is not specified, all the characters from the start position till the end of the string are extracted. Extract the first 10 characters var str = "JavaScript Tutorial"; var result = str.slice(0, 10); alert(result); Output : JavaScript If the end parameter is not specified, all the characters from the start position till the end of the string are extracted var str = "JavaScript Tutorial"; var result = str.slice(11); alert(result); Output : Tutorial What is the difference between substr and substring methods The difference is in the second parameter. The second parameter of substring() method specifies the index position where the extraction should stop. The character at the end position is not included in the substring. The second parameter of substr() method specifies the number of characters to return. Another difference is substr() method does not work in IE8 and earlier versions. What is the difference between slice and substring If start parameter is greater than stop parameter, then substring will swap those 2 parameters, where as slice will not swap. Another method that is very useful when extracting a substring is indexOf() method. This method returns the position of the first occurrence of a specified value in a string. If the specified value is not present then -1 is returned. Example : Retrieve the index position of @ character in the email var str = "pragim@pragimtech.com"; var result = str.indexOf("@"); alert(result); Output : 6 In our next video, we will discuss a simple real time example of where we can use indexOf() and substring() methods