{"id":11906,"date":"2020-10-29T10:40:48","date_gmt":"2020-10-29T17:40:48","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=11906"},"modified":"2023-12-01T04:03:28","modified_gmt":"2023-12-01T12:03:28","slug":"split-and-slice-in-javascript","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/split-and-slice-in-javascript\/","title":{"rendered":"JavaScript Split: A Step-By-Step Guide"},"content":{"rendered":"\n

The JavaScript split() method divides a string into an array of substrings. These substrings are added to a new array. split() returns the new array of substrings.<\/em><\/p>\n\n\n\n

\n\n\n\n

When you\u2019re programming, it\u2019s common to see cases where you need to get some text from a larger string. Say you want to get a user\u2019s first and last name from one string separately. How would you go about getting that information from a string?<\/p>\n\n\n\n

That’s where the JavaScript split() method comes in. split() divides a string into a list of substrings. In this guide, we’re going to discuss how to use the split() method, with reference to examples.<\/p>\n\n\n\n

String Refresher<\/strong><\/h2>\n\n\n\n

Before we start looking at the split()<\/em> and slice()<\/em> functions, we should remind ourselves how strings work. Strings are a sequence of one or more characters that may include letters, symbols, or numbers.\n\n<\/p>\n\n\n\n

Each character in a string can be accessed using its index number, starting with 0. Let\u2019s use an example to illustrate how a string is indexed:<\/p>\n\n\n\n
H<\/td>e<\/td>l<\/td>l<\/td>o<\/td>
<\/td>		t<\/td>h<\/td>e<\/td>r<\/td>e<\/td><\/tr>
0<\/td>1<\/td>2<\/td>3<\/td>4<\/td>5<\/td>6<\/td>7<\/td>8<\/td>9<\/td>10<\/td><\/tr><\/tbody><\/table>\n\n\n\n

As you can see, the first character in the string is \u201cH,\u201d which has an index value of \u201c0\u201d. The last character is \u201ce,\u201d which has an index value of \u201c10.\u201d Note that the space between the two words also has an index value.<\/p>\n\n\n\n

JavaScript Split<\/strong><\/h2>\n\n\n\n

The JavaScript string split() method splits up a string into multiple substrings. These substrings are stored in a new array. The original string is divided based on a specified separator character, like a space.<\/p>\n\n\n\n

Let’s look at the syntax for the JavaScript string split() method:<\/p>\n\n\n\n

var new_list = text.split(character, limit);<\/p>\n\n\n\n

The split() method is added to the end of our “text” variable. Our text variable is split based on the separator character we specify. We assign the result of the split() method to the JavaScript variable new_list<\/a>.<\/p>\n\n\n\n

The limit<\/em> parameter specifies how many JavaScript substrings<\/a> you want to include in your final array.<\/p>\n\n\n\n

You must assign the output of the split() method to a variable. This is because split() creates a new list. It does not modify your existing string.<\/p>\n\n\n\n

JavaScript Split String Example<\/h2>\n\n\n\n

Say that a user has given us their first and last names. We store this information in one string. To get the user’s first and last names separately, we could use the split() method.<\/p>\n\n\n\n

For example, when a user signs in to their account, we may want to say \u201cHello, [first name]\u201d instead of displaying their full name.<\/p>\n\n\n\n

We’re going to use a white space character (which is the space character) to separate out our string:<\/p>\n\n\n\n

var fullName = \u201cForename Surname\u201d;\nvar fullNameSplit = fullName.split(\u201c \u201c);\n\nconsole.log(fullNameSplit);<\/pre><\/div>\n\n\n\n
This code returns the following:<\/p>\n\n\n\n
[\u201cForename\u201d, \u201cSurname\u201d]<\/code><\/p>\n\n\n\n
The split()<\/em> function has split our string into an array of substrings. Now, we can access each string in the JavaScript array object<\/a> using an index number. For example:<\/p>\n\n\n\n
fullNameSplit[1];<\/pre><\/div>\n\n\n\n
This code returns:<\/p>\n\n\n\n
Surname<\/code><\/p>\n\n\n\n
The split() method returns an array from which we can retrieve individual values. Each array element corresponds with a word in our string. We retrieved the value with the index position 1 from our array.<\/p>\n\n\n\n