All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Split String By Comma

Last Updated : Mar 11, 2024

JavaScript Split String By Comma

In this tutorial we will show you the solution of JavaScript split string by comma, for this here we are going to use string.split() method. This method split the string on the based on value which we want.

Let us understand this with help of codes.

As, there are many methods with the help of which we are able to split string by comma using JavaScript.

Step By Step Guide On JavaScript Split String By Comma :-

We are going to use split() method. This method help us to split string using separator which we want. Let us see codes

<!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">
    <title> JavaScript split string by comma </title>
</head>
<body>
<script>
 <p>Our main or original string is as
 "One, Two, Three, Four, Five"</p>
 <p>
 Output of final result/Array is: <span class="output"></span>
</p>
 <button onclick="splitString()">
 Remove Text
</button>
 <script type="text/javascript">
  function splitString() {
   mainString = "One, Two, Three, Four, Five";
   resultedArray = mainString.split(', ');
   console.log(resultedArray);
   document.querySelector('.output').textContent = resultedArray;
  }
 </script>
</script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
  5. Here as we can see that inside body we create some paragraphs and a button. Paragraph are to show data before and after function whereas button is used to call function.
  6. After that we use our script tag, which is a paired tag and must have closing tag. We write all of our JavaScript code inside this tag.
  7. Here, we create or define our function which we call on button click. Here first we store original or say predefind values of string. Then in next path we separate string using split sting method. And store this in a variable named resultedArray.
  8. Now, our last job is to print array. Here, we use two ways to show resultedArray. First one is using console that prints or show our method inside console tab whereas in second way we prints message using paragraph tag inside body.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last in conclusion, here we can say that with the help of this article able to understand how to split string by comma using JavaScript.

I hope this tutorial on JavaScript split string by comma helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪