검색어의 공백 제거

검색할 때 검색어의 공백을 제거하여 띄어쓰기가 달라도 검색이 되도록 구현하는 중에,

'반딧불이의묘'라고 검색해도 해당 영화가 노출되지 않았다.

예상했던 결과는 검색어의 공백이 삭제되어 '반딧불이의묘'라고 값이 변경되는 것이었다.

 

왜 계속 안되는지 로그를 계속 찍어봤는데, trim()을 사용해서 문제가 됐다.

막연하게 trim() 은 공백을 제거한다고 알고 있었는데 너무 얕게 알고 있었다.

 

trim()

trim() 메서드는 문자열의 앞, 뒤 공백을 제거한 후 원본 문자열을 훼손하지 않고 새로운 문자열을 반환한다.

 

그래서 문자열의 공백을 제거할 다른 방법을 찾게 되었다.

1. split으로 공백 기준으로 문자열을 나눈다.
2. split 으로 나눈 배열을 join으로 합친다.

 

split()

split() 메서드는 문자열을 지정한 구분자를 기준으로 여러 개의 문자열이 담긴 배열로 반환한다.

let str = '빨간색 파란색 노란색 검정색';

let newStr = str.split(' ');
console.log(newStr); // (4) ['빨간색', '파란색', '노란색', '검정색']

공백 한 칸을 기준으로 4개의 배열이 반환되었다.

이걸 이제 join 으로 다시 합친다.

 

Join()

배열의 모든 요소를 하나로 연결하여 문자열로 반환한다.

newStr.join(''); //'빨간색파란색노란색검정색'

 

 

수정 전

let keyword = searchKeyword.toLowerCase().trim();

 

 

수정 후

const showHideMovie = () => {
  let $title = document.querySelector('.title');
  let movie = document.querySelectorAll('.movie-title');
  let keyword = searchKeyword.toLowerCase().split(" ").join(""); //수정 후
  movie.forEach(function(el){
    let movieTitle = el.innerText.toLowerCase().split(" ").join(""); //수정 후
    let parent = el.parentElement;

    if(movieTitle.includes(keyword)){
      console.log(el.parentElement);
      console.log(el, '포함!');
    }
  });
};

수정 후 정상 작동하는 걸 확인할 수 있었다.

느낀 점

적당히 알고 사용하면 안 될 것 같다.

간단하게 보이는 오류였는데, trim 이 문제라고는 생각지 못해서 시간을 소비했다.

tirm()에 대해 잘 알고 사용했다면 이렇게 소비하지는 않았을 것 같다.

 

개념 공부가 역시 중요하다.