[Javascript] replace를 이용해 문자열을 치환하는 방법(How to replace a string in javascript)

JS - replace(regx)

• 오늘 포스팅할 주제는 자바스크립트를 이용해 문자열을 치환하는 방법이다.(How to replace a string in javascript)
• 우리는 코드를 작성하면서 일괄 수정할때 보통 CTRL + F로 찾은 다음 바꾸기를 하거나 일괄적으로 한번에 원하는 단어를 치환한다.
• 에디터에서 하는 기능을 자바스크립트에서는 어떻게 구현하는지 알아보자.
• replace 를 한국어로 치환한다고 정의해서 포스팅 글을 쓰겠다.

목차

1. replace 알아보기

2. replace 활용하기

• 전체 문자열 모두 치환하기
• 대소문자 구분하여 치환하기
• 전체 문자열 대소문자 구분없이 치환하기

replace 알아보기

• replace 메서드는 원하는 패턴을 정해서 치환할 문자열에 적용해 문자열을 원하는 대로 치환할 수 있다.
• 원하는 패턴은 간단한 문자열이 될 수도 있고 정규표현식이 될 수도 있다.
• 간단한 예제를 살펴보자.

const message = "I don't know who you are."
message.replace('I','You')
// "You don't know who you are."

var newStr = str.replace(regexp|substr, newSubstr|function)

• MDN 참조

replace 활용하기

• 위에서 살펴본 간단한 예제는 실무에서 사용하기에는 적합하지 않다.
• 만약 치환하고 싶은 단어가 문자열에서 여러개 있을 경우, 또는 대소문자 구분 하거나 구분 하지 않고 변경하고 싶을때는 어떻게 할까?
• 우선 위에 예제를 가지고 어떤 점이 문제인지 살펴보자
  • 문자 I 를 You 로 모두 변경하고자 할때 아래와 같이 작성하게 되면 맨앞 첫번째 문자만 변경된다.

const message = "I don't know who am I."
message.replace('I','You')
// "You don't know who am I."

• 대소문자 구분없이 변경하고 싶은데 엄격하게 구분해서 바뀌지 않는다.

const message = "ABCDEFGH"
message.replace('a','Z')
// "ABCDEFGH"

• 이럴땐, 정규표현식을 이용해서 해결해보자.
• 첫번째로 문자를 모두 변경하는 예제코드를 살펴보자.
• /I/g 이 정규표현식을 사용하면 된다. g는 global을 나타낸다.

const message = "I don't know who am I."
message.replace(/I/g,'You')
"You don't know who am You."

• 두번째 대소문자 구분하지 않고 변경하기를 해결해보자.
• 이번에는 /a/i 정규표현식을 사용하면 된다. i는 ignore을 나타낸다. 즉 대소문자 무시하기!

const message = "ABCDEFGH"
message.replace(/a/i,'Z')

• 마지막으로 대소문자 구분없이 일치하는 모든 문자열을 치환하는 방법을 살펴보자.
• 예제 문구가 생각이 나지 않아 아주 엉망이 됐다.
• 살펴보면, /I/ig 정규표현식 2개를 동시에 사용했다.
• 대문자(I), 소문자(i) 둘다 You 로 치환됐다.

const message = "I don't know who am I. i like an apple."
message.replace(/I/ig,'You')
"You don't know who am You. You lYouke an apple."

결론

• replace 는 다양하게 사용되고 있는데 나는 많이 사용하질 않아서 사용할때마다 구글링을 해서 구글링 대신 내 포스팅을 볼려고 간단하게 정리했다.
• 정규표현식을 아주아주 잘하게되면 정말 어마어마해질것 같다.
• 정규표현식은 여기서 배울 생각은 하지 마시고 구글링을 검색해서 더 찾아보길 바란다.