How to Convert String to Array in Javascript

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.


  • 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">
    <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">
    <div class="container">
    <script src="script.js"></script>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;

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


  • 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');
    output.innerHTML = template;