JavaScript - 대소문자를 구분하지 않고 검색

 

 

웹 어플리케이션을 만들때 검색 기능을 많이 만들곤 한다.

 

간단하게 filter 함수와 match함수, 정규식을 통해 간단하게 구현할 수 있다.

 

(위 예제는 Vue.js로 구현한 화면입니다.)

 

 

리스트(array)에 filter Method로 간단하게 해결하는 방법입니다.

 

위 예제는 title, headline, subtitle 모두 대소문자를 구분하지 않고 검색을 하는 코드입니다.

 

정규식의 "i" 플래그쉽을 통해 보다 고급적인 검색이 가능합니다.

 

입력을 할 때 마다 '입력 값'이 정규식으로 대소문자를 구분하지 않는 방식을 match 함수로 통해 return 됩니다.

 

 

(리스트 BBQ의 검색을 하는 화면)

 

 

이런식으로 javascript로 간단하게 정규식을 표현 할 수 있습니다.

 

(정규식의 대한 사용법은 정말 여러가지가 있습니다. 검색해보면 무수한 양의 자료가 나오지만 괜찮은 블로그가 있어 소개합니다.)

 

 

 

 

정규식의 대한 블로그 : Javascript 와 RegExp 정규 표현식. 자바스크립트를 처음부터 다시 공부해보려고 한다. | by 박성룡 ( Andrew park ) | Medium

 

match 함수 : String.prototype.match() - JavaScript | MDN (mozilla.org)

filter 함수 : Array.prototype.filter() - JavaScript | MDN (mozilla.org)