September 21, 2021

How to Convert String to Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to convert string to array in javascript. A string consists of multiple alphabetical letters and it can also have spaces or special characters in it. Arrays are just a collection of items and those items can be of similar data type or different data types.

Converting a string to an array of individual characters can be a little bit tricky for a newbie developer. There are numerous ways to accomplish this goal and I will go with the split() method because it is one of the easiest solutions.

In the following example, we have one global string and upon click of a button, we will split it into individual characters and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have a few elements in the HTML file and that includes div, button, and ul. The div element is just a wrapper for the rest of the elements.

The inner text for the button element is “Convert”.
The ul element is empty for now but we will populate it using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <button>Convert</button>
        <ul></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

li {
    list-style: none;
    margin-left: -30px;
    font-weight: bold;
}

Javascript

We have selected button element and ul element using document.querySelector() method and stored them in btnConvert and output variables respectively.

We have a string “Hello World” and it is stored in the fruits variable.
We have attached the click event listener to the button element.
In the event handler function, we are using the split() method and passing it an empty string as a parameter. This method will return an array of characters.

We are using the map() method to loop through all the characters returned by the split() method and forming a template string that will contain a bunch of li elements. This method again returns an array so we are using the join() method and passing a newline character (\n) to form a string. The final string is stored in the template variable.
We are using console.log() to log the template string in the console window. You can skip this step.
We are setting our template string as innerHTML of the ul element to display our list of characters.

let btnConvert = document.querySelector('button');
let output = document.querySelector('ul');

let fruits = 'Hello World';

btnConvert.addEventListener('click', () =>{
    
    let template = fruits.split('').map(fruit => `<li>${fruit}</li>`).join('\n');
    console.log(template)
    output.innerHTML = template;
});

You May Also Like: