[javascript] replace 잘 써보기
The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced. - MDN
replace는 match된 모든 패턴을 replacement로 바꾸고, 새로운 문자열을 return 합니다.
이 패턴은 string 혹은 RegExp이 될 수 있습니다.
pattern이 string인 경우
basic usage
최초 match에 대해서 단 1개만 replace 됩니다.
let hello = 'hello! my name is stefan cho!'
hello.replace('!', '☺︎') // 'hello☺︎ my name is stefan cho!'
replacer function 사용
replace function이 최초 match에 대해서 단 1번만 호출됩니다.
let hello = 'hello! my name is stefan cho!'
hello.replace('!', function(...args) {
console.log(args); // ['!', 5, 'hello! my name is stefan cho!']
return '☻'
}) // 'hello☻ my name is stefan cho!'
pattern이 RegExp인 경우
basic usage
match된 결과 값이 replace 됩니다.
(예시에서 (?<=y)x는 Lookbehind assertion으로 x를 매칭시킵니다.)
let numberAndUnderScore = '123_456_789'
numberAndUnderScore.replace(/(?<=\d+)_/, '+') // '123+456_789'
위 결과가 맞는지 match method로 확인해봅시다.
match 패턴에 의해서 123을 찾았고, Lookbehind assertion에 의해 3번째 index의 ``가 매치되었습니다.
따라서 123+456_789는 타당한 결과값임이 증명되었습니다.
let numberAndUnderScore = '123_456_789'
numberAndUnderScore.match(/(?<=\d+)_/, '+') // ['_', index: 3, input: '123_456_789', groups: undefined]
global replace
모든 match값을 replace 해봅시다.
regex flag에 g(global)를 추가합니다.
let numberAndUnderScore = '123_456_789'
numberAndUnderScore.replace(/(?<=\d+)_/g, '+') // '123+456+789'
replacer function 사용
같은것을 replace function으로 만들어 봅시다.
replace function은 match되는 pattern이 있을 때 마다 호출됩니다.
numberAndUnderScore.replace(/(?<=\d+)_/g, function(...args) {
return '+'
}) // '123+456+789'
세자리마다 comma(,) 찍기 Example
let money = '10000000000';
money.match(/\B(?=(\d{3})+(?!\d))/g) // ['', '', '']
money.replace(/\B(?=(\d{3})+(?!\d)/g, function(...args) {
console.log(args);
return ','
}) // '10,000,000,000'
money.replace(/\B(?=(\d{3})+(?!\d)/g, ',') // '10,000,000,000'
\B
는 맨 앞에 ,
를 찍는것을 방지하기 위해 추가되었습니다.
(\d{3})+
이므로 digit의 개수가 3의 배수(3개, 6개, 9개 등)이면서 끝이 숫자가 아닌경우에 대해서 Lookahead assertion(x(?=y)
)으로 match되는 문자열을 찾습니다.
여기서는 x(?=y)
형태에서 x
값이 빈값이기 때문에(\B
는 계산에서 제외됨), 해당 index의 빈문자열(''
)이 match된 것입니다.
match되는 케이스가 총 3번이므로 console.log는 세번 출력됩니다.
2,5,8번 index에 빈문자열을 ,
로 변형하게 됩니다.
Author And Source
이 문제에 관하여([javascript] replace 잘 써보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@devstefancho/javascript-replace-잘-써보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)