[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. 문자열 일부 추출하는 메서드 종류 ★

• slice() 메서드  cf. 배열용 slice() 메서드
• substr() 메서드
• substring() 메서드

 

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