bravo my life!

[JavaScript] replace (문자열 변경) 본문

Study/HTML, CSS, JavaScript

[JavaScript] replace (문자열 변경)

losajjang 2022. 8. 27. 12:07
728x90

1. 개요

replace는 특정 문자열을 찾고, 내가 지정한 문자열로 변경하는 함수다.

특정 문자열을 찾을 때 동일한 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다.

이런 경우에는 정규식을 통해 검색된 모든 문자를 변경할 수 있다.

 

2.기본 사용

replace('찾을 문자열', '변경할 문자열')

let string = 'hello world, JavaScript'

string.replace('Java', 'Type')

// 기대값 
// string = 'hello world, TypeScript'

특정 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다.

let string = 'hello world, JavaScript, JavaScript, JavaScript'

string.replace('Java', 'Type')

// 기대값
// string = hello world, TypeScript, JavaScript, JavaScript

 

3. 정규식 사용 모든 문자 변경

정규식을 사용하면 여러번 반복된 모든 문자열도 변경이 가능하다.

let string = 'hello world, JavaScript, JavaScript, JavaScript'

string.replace(/Java/g, 'Type')

// 기대값
// string = hello world, TypeScript, TypeScript, TypeScript

 

4. 정규식 사용 대소문자 구분없이 모든 문자 변경

하지만 위의 정규식 g는 대소문자를 구분하기 때문에 아래과 같이 찾을 문자열이 소문자라면 변경이 되지 않는다.

let string = 'hello world, JavaScript, JavaScript, JavaScript'

string.replace(/java/g, 'Type')

// 기대값
// string = hello world, JavaScript, JavaScript, JavaScript

이런 경우에는 정규식표현에 i를 포함해준다.

let string = 'hello world, JavaScript, JavaScript, JavaScript'

string.replace(/java/gi, 'Type')

// 기대값
// string = hello world, TypeScript, TypeScript, TypeScript

 

5. 정규식 사용 모든 숫자를 삭제

문자열 내에서 숫자를 제거하고 싶다면 따옴표를 사용한다.

[1-9]는 1에서 9까지의 숫자라는 의미이다.

let string = 'hello123world456,789Javascript'

string.replace(/[1-9]/gi, '')

// 기대값
// string = helloworld,Jacascript

 

5. 정규식 사용 모든 숫자를 다른 문자로 변경

따옴표 안에 문자를 넣는다면 변경이 가능하다.

let string = 'hello123world456,789Javascript'

string.replace(/[1-9]/gi, '#')

// 기대값
// string = hello###world###,###Javascript

연속된 숫자를 한덩어리로 취급해 하나의 문자로 변경하고 싶다면 [1-9]패턴뒤에 +를 붙여준다.

let string = 'hello123world456,789Javascript'

string.replace(/[1-9]+/gi, '#')

// 기대값
// string = hello#world#,#Javascript

 

 

정규식의 표현은 이 것 말고도 너무 많기 때문에 다음의 링크를 참고하자.

mdn 정규표현식 링크

'Study > HTML, CSS, JavaScript' 카테고리의 다른 글

[JavaScript] Set 객체  (0) 2022.07.25
[CSS] child 선택자  (0) 2022.07.09
[TIL] JavaScript의 데이터 타입  (0) 2022.06.21
[TIL] JavaScript를 배워보자.  (0) 2022.06.20
[HTML] 공부 일지. 초반부 복습.  (0) 2022.01.24