Manipulating data is an integral part of any web application. JavaScript provides different ways for parsing and extracting data. The JavaScript Substring, Substr and Slice methods are used for extracting strings from a larger one. This JavaScript Substrig article will provide in-depth knowledge about the same in the following sequence:
- What is a Substring?
- How to get a JavaScript Substring?
- Using Substring with length Property
- Substring vs Substr vs Slice
What is a Substring?
A substring is a subset of another string. It is a contiguous sequence of characters within a string.
For example, “Welcome to Edureka” is a substring of the string “Welcome to Edureka Online Courses“. But, “Edureka Courses” is not a substring as it is a subsequence or the generalization of the string.
How to get a JavaScript Substring?
The substring() is an inbuilt function in JavaScript which returns a part of the given string from start index to end index. The indexing starts from zero. It is used to return a portion of the string, starting at the specified index and extending for a given number of characters afterward.
Syntax:
string.substring(indexA, [indexB])
where,
- indexA(Starting Index) − Integer between 0 and one less than the length of the string.
- indexB(Ending Index) − Integer between 0 and the length of the string. It is optional.
This substring method returns the new sub-string based on given parameters.
Let’s take an example and see how the substring() function works.
Input:
<html> <head> <title>JavaScript String substring() Method</title> </head> <body> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%20%3D%20%22text%2Fjavascript%22%3E%0Avar%20str%20%3D%20%22Welcome%20to%20Edureka%20JavaScript%20Training%22%3B%0Adocument.write(%22(3%2C7)%3A%20%22%20%2B%20str.substring(3%2C7))%3B%0Adocument.write(%22(0%2C10)%3A%20%22%20%2B%20str.substring(0%2C10))%3B%0Adocument.write(%22(11)%3A%20%22%20%2B%20str.substring(11))%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html>
(3,7): come
(0,10): Welcome to
(11): Edureka JavaScript Training
Using Substring with length Property
The length property is used to get the length of a string. The substring() method and length property are used together to extract the last characters of a particular string. This method is easier to remember as you don’t need to know the starting and ending indices.
Example:
var anyString = 'Edureka'; var anyString1 = anyString.substring(anyString.length - 5); //Displays last 5 characters console.log(anyString1);
Output:
ureka
Now that you know what is substring and how it works, let’s move on with our JavaScript Substring article and discuss the differences between substring, substr, and slice.
Substring() vs Substr() vs Slice()
These methods are used to extract parts of a string and return the extracted parts in a new string. All of these do not change the original string.
| Substring() | Substr() | Slice() |
| JavaScript substring() method returns part of the string between startIndex & endIndex. It excludes the endIndex character or up to the end of the string. | JavaScript substr() method returns part of the string starting from an index and number of characters after the start index. It has two parameters such as startIndex and Length | slice() method is similar to substring. It returns partial-string between start index & end index. It excludes end index character or up to the end of the string if end index not provided |
Substring() Syntax:
string.substring(startIndex[, endIndex])
Example:
var string = "Edureka JavaScript"; var substring = string.substring(0,7); console.log(substring);
Output:
Edureka
Substr() Syntax:
string.substr(startIndex[, length])
Example:
var string = "Edureka JavaScript"; var substr = string.substr(8,10); console.log(substr);
Output:
JavaScript
Slice() Syntax:
string.slice(startIndex[, endIndex])
Example:
var string = "Edureka JavaScript"; var substr = string.slice(8,12); console.log(substr);
Output:
Java
With this, we have come to the end of our JavaScript Substring blog. I hope you understood how it is used to exact any part of a string.
Now that you know about JavaScript Substring, check out the Web Developer Course by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
Got a question for us? Please mention it in the comments section of “JavaScript Substring” and we will get back to you.