Split은 문자열(string)을 하위문자열(substring)의 배열로 분리합니다.
a substring is a contiguous sequence of characters within a string.<from Wikipedia>
<!DOCTYPE html> <html> <body> <p>Click the button to display the array values after the split</p> <button onclick="myFunction()">Try it</button> <!-- 버튼 클릭 시 함수 호출 --> <p id="demo"></p> <!-- innerHTML 결과 표시 --> <script> function myFunction() { /* 함수 선언 */ let str = "How are you doing today?"; /* 문자열을 변수 str에 대입 */ let res = str.split(" "); /* 변수 str을 공백으로 분리하여 변수 res에 대입 */ document.getElementById("demo").innerHTML = res; /* id="demo"에 변수 res를 표시 */ } </script> </body> </html>
split() 메서드는 문자열(string)을 하위 문자열(substring) 배열로 분리하는 데 사용되며, 새 배열을 반환합니다.
Tip: 빈 문자열 (“ ”)이 구분자(separator)로 사용되는 경우, 문자열은 각 문자로 분리됩니다.
Note: split() 메서드는 원래 문자열을 변경하지 않습니다.
string.split(separator, limit)
Parameter | Description |
---|---|
separator | 선택 가능. 문자 또는 정규표현식을 사용하여 문자열(string)을 분리하기 위해 사용. 생략하게 되면 전체 문자열이 반환됩니다.(단일 항목만 가진 배열) |
limit | 선택 가능. splits 수를지정하는 정수, split 제한 이후의 항목은 배열에 포함되지 않습니다. |
분리된 값을 포함하는 배열(An Array, containing the splitted values)을 반환합니다.
구분자 매개변수(separator parameter)를 생략하여, 문장 전체가 반환됩니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display the array value after the split</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { let str = "How are you doing today?"; let res = str.split(); /* split()의 구분자 매개변수가 없어 문장 전체가 표시 */ document.getElementById("demo").innerHTML = res; } </script> </body> </html>
공백(white-space)을 포함하여 각각의 철자 배열로 분리&반환합니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display the array value after the split.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <!-- H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? --> <script> function myFunction() { let str = "How are you doing today?"; let res = str.split(""); /* string을 공백 포함하여 분리 */ document.getElementById("demo").innerHTML = res; } </script> </body> </html>
제한 매개변수(limit parameter)를 사용합니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display the array values after the split.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <!-- How,are,you --> <script> function myFunction() { let str = "How are you doing today?"; let res = str.split(" ", 3); /* 공백으로 분리하고 배열에서 3개만 표시 */ document.getElementById("demo").innerHTML = res; } </script> </body> </html>
철자(letter)를 구분자로 사용하기
<!DOCTYPE html> <html> <body> <p>Click the button to display the array values after the split.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <!-- H,w are y,u d,ing t,day? --> <script> function myFunction() { let str = "How are you doing today?"; let res = str.split("o"); document.getElementById("demo").innerHTML = res; console.log(res, res.length); /* ["H", "w are y", "u d", "ing t", "day?"] 5 */ } </script> </body> </html>