[String] JS - slice() 메서드 - 문자열 자르기 (= 문자열 일부 추출 = slice메서드 = 슬라이스 메서드) ※ 휴대폰 010만 입력 허용

1. slice() 예제 - 문자열 자르기 (= 문자열 일부 추출)
2. slice() 정의
3. slice() 구문
4. slice() 예제1 - 첫번째 문자만 추출
5. slice() 예제2 - 마지막 글자만 추출
6. slice() 예제3 - 마지막 3글자만 추출
7. slice() 예제 - 년월일 숫자 쪼개서 단위 붙이기
8. slice() 예제 - 휴대폰 010 시작 전화번호만 입력 허용

slice() 예제 - 문자열 자르기 (= 문자열 일부 추출) 

 

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

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

<script>

function homzzang() {

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

  var res = str.slice(5, 17);

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

}

</script>

 

결과보기

결과값: Homzzang.com

slice() 정의

 

문자열 일부 추출해 새 문자열로 반환.

 

---

 

1.

• 시작 및 종료 매개변수 사용해 추출할 문자열 부분 지정.
• start ≤ 추출범위 ＜ end

 

2.

• 첫 번째 문자의 위치는 0이고, 두 번째 문자의 위치는 1.
• 문자열 끝에서 선택하려면 음수 사용.

3.

• 첫글자만 추출 (예제1) : slice (0, 1)
• 끝글자만 추출 (예제2) : slice (-1)
• 끝몇글자 추출 (예제3) : slice(-n, str.length) 

 

4.

모든 브라우저 지원

 

5.

ECMAScript 1

 

slice() 구문

 

string.slice(start, end)

 

---

[매개변수]

 

start

필수. 추출시작위치 (※ 첫글자 순번 : 0)

 

end

선택. 추출종료위치 (※ 포함 안 함)

만약, 생략된 경우, 시작위치부터 마지막 글자까지 추출. 

 

slice() 예제1 - 첫번째 문자만 추출

 

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

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

<script>

function homzzang() {

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

  var res = str.slice(0, 1);

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

}

</script>

 

결과보기

결과값: 홈

slice() 예제2 - 마지막 글자만 추출

 

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

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

<script>

function homzzang() {

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

  var res = str.slice(-1);

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

}

</script>

 

결과보기

결과값: m

slice() 예제3 - 마지막 3글자만 추출

 

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

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

<script>

function homzzang() {

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

  var res = str.slice(-3,str.length);

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

}

</script>

 

결과보기

결과값: com

slice() 예제 - 년월일 숫자 쪼개서 단위 붙이기

 

<script>

day = "20211218";

document.write("<div>" + day.slice(0, 4) + "년 " + day.slice(4, 6) + "월 " + day.slice(6, 8) + "일</div>");

</script>

 

결과보기

PS. PHP 경우, substr() 함수 이용.

비타주리 님 (211218) https://sir.kr/qa/442461

slice() 예제 - 휴대폰 010 시작 전화번호만 입력 허용

 

<label for="hz">휴대폰</label><input type="text" id=hz>

<script>

hz.onkeyup = function() {

    if (this.value.length >= 3 && this.value.slice(0, 3) != "010") this.value = "";

}

</script>

 

결과보기

비타주리 님 (220130) https://sir.kr/qa/447539