목차
split() 예제 - 문자열 쪼개기
split() 정의
split() 구문
split() 예제 - 이메일 숨기기 (= 이메일 마스킹)
split() 예제 - 문자열 쪼개기 후, 1글자씩 <span>으로 묶어 합치기
split() 예제 - 특정 라인의 문자열만 대체
split() 예제 - 엔터키로 줄바꿈 된 문자열 한줄씩 가져오기
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
주소 복사
랜덤 이동