목차

Javascript String split() Method

  • description : Javascript String split() Method
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-22


Ref

Javascript String split() Method

예제

Split은 문자열(string)을 하위문자열(substring)의 배열로 분리합니다.
a substring is a contiguous sequence of characters within a string.<from Wikipedia>

Example

<!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>

Definition and Usage

split() 메서드는 문자열(string)을 하위 문자열(substring) 배열로 분리하는 데 사용되며, 새 배열을 반환합니다.

Tip: 빈 문자열 (“ ”)이 구분자(separator)로 사용되는 경우, 문자열은 각 문자로 분리됩니다.

Note: split() 메서드는 원래 문자열을 변경하지 않습니다.

Syntax

string.split(separator, limit)

Parameter Values

Parameter Description
separator 선택 가능. 문자 또는 정규표현식을 사용하여 문자열(string)을 분리하기 위해 사용. 생략하게 되면 전체 문자열이 반환됩니다.(단일 항목만 가진 배열)
limit 선택 가능. splits 수를지정하는 정수, split 제한 이후의 항목은 배열에 포함되지 않습니다.

Return Value

분리된 값을 포함하는 배열(An Array, containing the splitted values)을 반환합니다.

More Examples

구분자 매개변수(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>

Example

공백(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>

Example

제한 매개변수(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>

Example

철자(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>


, , , ,