[TIL] 20230601 - 공백 제거 split(), join(), replace() 정규식 사용 문자열 치환하기

 문자열 치환 replace() 함수, split(), join()  

검색시에 공백을 제거해서 띄어쓰기가 틀리거나 해도 모두 검색이 될 수 있도록

split으로 공백을 기준으로 쪼개고 join으로 공백을 없애 주도록 했는데

튜터님께 코드 피드백 받는도중 저건 왜 split으로 쪼갠거죠?

하셔서 ㅎㅎㅎㅎㅎㅎ

코드봤을때 조금 의아했다! 하시며 replace 함수를 쓰는게 어떻겟나? 하셔서 변경해보앗다.

 

기존코드

const matchMovies = movies.filter((item) => { 
    let titles = item.original_title.split(' ').join('').toLowerCase();
    inputValue = inputValue.split(' ').join('');
    return titles.includes(inputValue);
});

replace 함수로 " " 공백을 -> "" 공백이 없게 문자열을 바꿔라! 했는데

const matchMovies = movies.filter((item) => { 
    let titles = item.original_title.replace(" ","").toLowerCase();
    inputValue = inputValue.replace(" ","");
    return titles.includes(inputValue);
});

물론 저렇게까지..... 띄어쓰기를 하지는 않겠다만 ㅎㅎㅎㅎㅎㅎㅎ

저런 경우에는 replace로 문자열이 완벽히 치환되지않았다!

그이유는,

 

replace() 함수는

문자열에서 변경하려는 문자열이 여러 번 반복될 경우,

첫 번째로 발견한 문자열만 치환해주기 때무네!!!

 

문자열 내에서 찾아낸 변경하려는 모든 문자열을 치환하는 방법!

정규식(regular expression) 사용

// 예시코드
let str = 'apple, banana, orange, banana';
let replaced_str = str.replace(/banana/g, 'tomato');

document.write('변경 전 : ', str, '<br/>');
document.write('변경 후 : ', replaced_str, '<br/>');


// 결과 
변경 전 : apple, banana, orange, banana
변경 후 : apple, tomato, orange, tomato

정규식으로 찾으려는 문자열은 '/'로 감싸서, 파라미터로 들어가는 값이 정규식 임을 알려주고

그리고, '/' 뒤에는 'g'라는 modifier를 붙여준다

g는 'global match'라는 의미로 사용

 

 

const matchMovies = movies.filter((item) => { 
    let titles = item.original_title.replace(/ /g,"").toLowerCase();
    inputValue = inputValue.replace(/ /g,"");
    return titles.includes(inputValue);
});

공백을 / /로 감싸고 g 붙여주니 잘된당!!!

 

 

추가로!

 대소문자 구분없이 모든 문자열 치환 

let str = 'apple, Banana, orange, banana';
let replaced_str = str.replace(/banana/gi, 'tomato');

document.write('변경 전 : ', str, '<br/>');
document.write('변경 후 : ', replaced_str, '<br/>');

// 결과 
변경 전 : apple, Banana, orange, banana
변경 후 : apple, tomato, orange, tomato

대소문자 구분없이 문자열을 치환하기 위해서는

'i' modifier를 사용했기 때문에 'i'와 'g' modifier를 위 예제와 같이 함께 적어주면 된당