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

[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)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012