• 회원가입
  • 로그인
  • 구글아이디로 로그인

[String] JS - split() 메서드 - 문자열 쪼개기 (= split메서드 = 스플릿 메서드) ※ 이메일숨기기 (= 이메일마스킹) ※ 문자열 쪼갠 후 각 글자별로 다른 (색깔/색상) 적용

목차

  1. split() 예제 - 문자열 쪼개기
  2. split() 정의
  3. split() 구문
  4. split() 예제 - 이메일 숨기기 (= 이메일 마스킹)
  5. split() 예제 - 문자열 쪼개기 후, 1글자씩 <span>으로 묶어 합치기
  6. split() 예제 - 특정 라인의 문자열만 대체
  7. split() 예제 - 엔터키로 줄바꿈 된 문자열 한줄씩 가져오기
  8. split() 예제 - 중첩적으로 사용해 원하는 텍스트 찾기

 

split() 예제 - 문자열 쪼개기

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var str = "홈짱닷컴 Homzzang.com";

  var res = str.split(" ");

  document.getElementById("demo").innerHTML = res;

}

</script>

 

결과보기 (결과값: 홈짱닷컴,Homzzang.com)

 

split() 정의

 

문자열을 하위 문자열 배열로 분할.

즉, 지정 구분자 기분으로 문자열을 쪼갠 후 콤마(,)로 구분해 반환.

 


 

1.

새 배열을 반환. (즉, 원래 문자열은 변경 X)

(" ")가 구분자인 경우, 문자열을 단어 기준으로 분할.

 

2. 문자열 일부 추출하는 메서드 종류 ★

 

3.

모든 브라우저 지원.

 

 

split() 구문

 

string.split(separator, limit)

 


[매개변수]

 

separator

선택. 분할 구분자 (※ 문자열 또는 정규식 가능)
※ 생략하면 원래 문자열이 있는 배열 반환.

 

limit

선택. 분할 수를 제한하는 정수.

limit 이후의 항목은 제외됨.

 


[반환값]

 

구분자 기분으로 분할된 문자열 값으로 구성된 배열 반환.

 

 

split() 예제 - 이메일 숨기기 (= 이메일 마스킹)

 

<script>

function masking(email) { 

   var len = email.split('@')[0].length ;  // ******@gmail.com

// var len = email.split('@')[0].length-3; // AB***@gamil.com

   return email.replace(new RegExp('.(?=.{0,' + len + '}@)', 'g'), '*');

 

}

document.write(masking(""));

</script>

 

결과보기

 

split() 예제 - 문자열 쪼개기 후, 1글자씩 <span>으로 묶어 합치기

 

<style>

span:first-child {color:red;}

span:nth-child(2) {color:blue;}

span:nth-child(3) {color:magenta;}

span:nth-child(4) {color:green;}

</style>

 

<p id='hz'>홈짱닷컴 Homzzang.com</p>

 

<script>

hz.innerHTML = "<span>" + hz.innerText.split("").join("</span><span>") + "</span>";

</script>

 

결과보기

바타주리 님 (210727) https://sir.kr/qa/423951

 

split() 예제 - 특정 라인의 문자열만 대체

※ 3번의 A만 B로 대체

 

<div id='hz'>

1. A<br>

2. A<br>

3. A<br>

4. A

</div>


<script>

hz.innerHTML = hz.innerHTML.split('3')[0] + '3' + hz.innerHTML.split('3')[1].replace('A', 'B');

</script>

 

결과보기

비타주리 님 (220810) https://sir.kr/qa/469839

PS. replace() 대신 replaceAll() 사용하면 3번과 4번 둘 다 바뀜.

 

split() 예제 - 엔터키로 줄바꿈 된 문자열 한줄씩 가져오기

 

<div id="hz">

    홈짱닷컴

    Homzzang.com

    그누보드/영카트 강의

</div>


<script>

var str = document.querySelector('#hz').textContent.split('\n').filter((elem) => {  return elem !== undefined && elem !== null && elem !== '' } )

console.log(str[0]); // 홈짱닷컴

console.log(str[1]); // Homzzang.com

</script>

 

Phillips 님 (230104) https://sir.kr/qa/485390 

 

split() 예제 - 중첩적으로 사용해 원하는 텍스트 찾기

 

<input type="text" id="hz" value="신비"  onkeypress="checkEnterKey(event)">

<input type="button" value="확인" onclick="homzzang()">

<div id="result"></div>


<script> 

function homzzang() {

  let niddle = hz.value;

  let hash = "신비@2/200|홈짱@3/300";

  for (i of hash.split("|")) {

    if (i.split("/")[0].indexOf(niddle) > -1 && hz.value.trim() != "") {

        findString = i.split("/")[1];

        break; 

    }

    else findString = "없음";

  }

  result.innerHTML = findString;

}

  

function checkEnterKey(event) {

  if (event.key === "Enter") {

    homzzang();

  }

}

</script>



결과보기

비타주리 님 (240120) https://sir.kr/qa/523335

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
String JS - String - 문자열
String JS - constructor 속성 - 객체생성자함수반환. (문자열 경우)
String JS - length 속성 ★ - 문자열길이 반환 (= length속성 = 렝스속성) ※ 문자개수/텍스트길이…
String JS - prototype 속성(문자열) - 객체에 사용자정의 속성 및 메서드 추가 (프로토타입)
String JS - charAt() 메서드 ★ - 문자열의 지정 위치 문자. (= charAt메서드) ※ 개별문자에 스…
String JS - charCodeAt() 메서드 - 문자열의 지정위치문자의 유니코드 (= charCodeAt메서드 =…
String JS - concat() 메서드 ★ - 문자열결합 (= 문자열합치기 = concat메서드 = 컨캣메서드)
String JS - endsWith() 메서드 - 지정문자열로 끝나는지(=종료) 여부 (IE12이상)
String JS - fromCharCode() 메서드 - 유니코드를 문자열로 변환
String JS - includes() 메서드 ★ - 지정문자열포함여부 (= includes메서드 = 인클루드즈메서드)
String JS - indexOf() 메서드(문자열) ★ - 처음일치문자열위치찾기 (= 문자열포함검사 = 인덱스어브메서…
String JS - lastIndexOf() 메서드(문자열) ★ - 마지막일치문자열위치찾기 (= 문자열포함검사 = 라스…
String JS - localeCompare() 메서드 - 문자열순서비교
String JS - match() 메서드 ★ - 일치하는 문자열 반환 (= match메서드 = 매치메서드) ※ 정규식 …
String JS - repeat() 메서드 - 지정횟수만큼 문자열반복 (= 리피트)
String JS - replace() 메서드(String용) ★ - 문자열 대체 (= replace메서드 = 리플레이스…
String JS - search() 메서드 - 문자열위치찾기 ※ 문자열포함검사
String JS - slice() 메서드 - 문자열 자르기 (= 문자열 일부 추출 = slice메서드 = 슬라이스 메서…
String JS - split() 메서드 - 문자열 쪼개기 (= split메서드 = 스플릿 메서드) ※ 이메일숨기기 (…
String JS - startsWith() 메서드 - 지정문자열로 시작 여부 (IE12이상)
1/3
목록
찾아주셔서 감사합니다. Since 2012