Convert String To Array Using Javascript Split Method

In this tutorial, you’ll be going to learn how to convert string to array using javascript split method. The easiest approach to use javascript built-in method String.split().

JavaScript split string method return array of a substring after splitting a string based on the separator you provide. The separator might be a string, special character or regular expression.

But their also another way you can convert string to array using javascript without using any javascript built-in function. Which we will also be going to discuss in this post.

As a developer, it’s your duty to know all types of methods to complete one task. You also might find an interview question related to this topic so stick to the end.

Also, see our other javascript series-

  1. Reverse a String in JavaScript
  2. Find Max and Min Value from an Array in JavaScript
  3. Empty An Array In JavaScript
  4. Check object empty in javascript
  5. Check if the array is empty in javascript
  6. How to Add Elements to an Array In Javascript
How to Convert String To Array Using Javascript Split Method
Javascript: String To Array Using Split Method

Convert String To Array Using Javascript Split Method

Table Of Content:

  • JavaScript String Split Method
  • Different Types Of Split Separator
    • Split Method With No Separator
    • Split Method With Empty String Separator
    • Pass Regular Expression As Split Separator
    • Convert Comma Separated Value To Array
    • Convert Dash Separated Value To Array
  • Split Separator With Limit
  • String To Array Without Using Any JS Function

So we’ll be going to discuss all the above points in detail. Do not miss to read any point.

JavaScript String Split Method

Javascript Split method is a popular way to convert string to array. But it depends on the requirement when it comes to converting string to an array.

Javascript split method invokes the string which you want to split into array elements. Then, we need to pass the separator as the first argument to split the string, as a result, it returns a new array with substring.

Let’s Look at a simple example.

// declare a string
let string = "hello how are you ?"

// string to array using spit
let array = string.split(' ') // blank space sperarator pass

console.log(array)
// result => [ "hello" , "how" , "are" , "you" , "?" ]

so we pass a blank space string separator to a split method. And we get an array of a substring.

Types Of Split Separator

Different Types Of Split Separator

There is a different type of separator but some of them are commonly used which we will be going to show you.

Split Method With No Separator

When no separator pass to a split method then it returns an array with a single element that contains an entire string. Let’s see an example

// declare a string
let string = "hello world"

// string to array using spit
let array = string.split()  // no separator pass

console.log(array)
// result => [ "hello world" ]

As you see we get only one element in an array. This would happen when you want an entire string to be as an array.

Split Method With Empty String Separator

If you pass an empty string to a separator inside split method then every character in a string becomes an array element.

// declare a string
let string = "hello"

// string to array using split with empty string separator
let array = string.split('')

console.log(array)
// result => [ "h" , "e" , "l" , "l" , "o" ]

So our hello string convert to an array of a substring. In this case length of string and length of the array is the same.

Pass Regular Expression As Split Separator

Until now, we are passing a string as a separator for split method. But we can also pass a regular expression as a separator.

Let’s take an example.

// declare a string
let string = "fruits name: apple, mango, banana"

let reg = /,\s|:\s/

// string to array using split with regular expression
let array = string.split(reg) // split colon, comman and space

console.log(array)
// result => [ "fruits name" , "apple" , "mango" , "banana" ]

So any regular expression you can use based on your requirements.

Convert Comma Separated Value To Array

If you want to convert a comma-separated value to an array element. Then you need to pass comma as a separator in the split method.

// declare a string
let string = "apple,mango,banana"

// string to array using split with comman
let array = string.split(',')

console.log(array)
// result => [ "apple" , "mango" , "banana" ]

Convert Dash Separated Value To Array

Many times you also need to convert string to array-based on the dash separator. Let’s see an example.

// declare a string
let string = "999-999-9999"

// string to array using split with comman
let array = string.split('-')

console.log(array)
// result => [ "999" , "999" , "9999" ]

Split Separator With Limit

The split method also accepts one more parameter which is a second argument. The second argument of the split method limits the number of element return in the array.

Let’s see the example.

// declare a string
let string = "hello"

// string to array using split with limit
let array = string.split('',4)

console.log(array)
// result => [ "h" , "e" , "l", "l" ]

In the above example, we split string with an empty string as separator but we limit the number of array elements that returns in an array.

String To Array Without Using Any JS Function

You can also use a traditional approach to convert string to array using for loop. Each string is a combination of string. So you can loop through string as array in javascript. Let’s see an example.

// declare a string
let string = "hello"

// string to array using split with limit
let array = []

for(let i = 0; i < string.length; i++){
   array.push(string[i])
}

console.log(array)
// result => [ "h" , "e" , "l", "l", "o" ]

So in the above example, we use for loop on a string and add each element to array

Conclusion:

As you can see there are many ways you can implement for how to convert string to array using javascript split method

We have used the built-in function provided by the JavaScript split method. And we have also used the for loop which is a traditional approach to get the same result.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestions is also acceptable. Also, like our Facebook Page.

You can also check :

  1. How to check if an object is empty in javascript
  2. How To Empty An Array In JavaScript
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from a javascript array

Leave a Reply

Your email address will not be published. Required fields are marked *