jQuery contains 선택자를 이용해 HTML div 태그 안 글자 중 특정 글자를 찾는 기능을 합니다. 찾아낸 글자가 포함된 div 태그의 백그라운드 색을 변경해 주는 간단한 예제 소스 코드를 만들어 보았습니다. jQuery의 contains 선택자를 사용해 정해진 이름이 아닌 사용자로부터 입력받은 글자에 따라 다른 결과를 보여줄 수 있는 점이 재밌었던 것 같습니다.
한 글자도 검색이 되며 검색할 div 안 텍스트가 포함되는 단어들은 모두 백그라운드를, 색을 변경해 줍니다.
See the Pen Untitled by zzarungna (@zzarungna) on CodePen.
위 소스 화면으로 직접 테스트하며 결과 화면을 확인하실 수도 있지만 실행한 소스 코드의 결과 화면 이미지도 하나 첨부합니다.
div 태그 안 특정 글자를 찾아 CSS까지 제어할 수 있는 소스코드가 필요 하셨던 분들은 필요한 부분에서 활용하시면 좋을 것 같습니다.