JavaScript Split String Into Array
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of JavaScript split string into array, here we used split() method for split string into an array. The split() method splits a string into an array of substrings.
The split() method returns the new array. The split() method does not change the original string. If (’ ’) is used as separator, the string is split between words.
Step By Step Guide On JavaScript Split String Into Array :-
Here we defined input tag for getting string input from user dynamically and submit button defined for submit user input value then defined two div tags ‘h,res’ for displaying heading, result of split array on webpage.
In script we collecting user input by Id ‘str’ and stored value on variable ‘inpt’ then we appends with split() method for splits the string into separated characters and result stored on variable ‘arr’.
Finally we appended result and defined heading on webpage by innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>SPLIT STRING INTO ARRAY</title>
</head>
<body>
<input id="str" type="text" placeholder="Enter a String">
<input onclick="fun()" type="submit" value="Submit">
<div id="h"></div>
<div id="res"></div>
<script>
function fun(){
var inpt=document.getElementById('str').value;
var arr=inpt.split("");
document.getElementById('h').innerHTML="SPLITED STRING RESULT<br>";
document.getElementById('res').innerHTML=arr;
}
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined two input tags for getting input string from user and submit button for submit user string on script when user clicks on submit button by function ‘fun()’.
- Two div tags defined with id attributes ‘h, res’. In script we defined function fun(), here user input collected by ‘str’ and stored on variable ‘inpt’.
- Using that variable we appended split() method with double quotes so it will separates each characters by comma and stored on variable ‘arr’.
- We appended heading ‘SPLITED STRING RESULT’ on div element ‘h’ and appended result of array on div element ‘res’ so it will displayed on webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to split a string into array of characters using javascript.
When we executes program on browser we can see the input box with submit button.
User needs to give input string and clicks on submit button then user gave string will separated by comma displayed on webpage with program concept heading.
If user not filled input box and clicks on submit button then we can’t see the result so user have to confirm whether input box filled or not.
I hope this tutorial on JavaScript split string into array helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
