[JavaScript] 특정단어 하이라이트 주기

#자바스크립트 #제이쿼리 #JQuery #통합검색 #검색어표시 #단어표시 #replaceAll #CDN #자바스크립트

안녕하세요, 배곧동개발자 입니다.

여러 사이트에서 검색을 했을 때에 하이라이트 표시되는거 한번씩은 보였죠?

이걸 자바스크립트로 구현을 한번 해보도록 하겠습니다-

<div class="notice" id="notice">
    안녕하세요, 배곧동개발자입니다<br/>
    아주 간단히 하이라이트를 주는 방법을 알아볼게요-<br/>
    위에 input에 텍스트를 넣고 엔터 눌러보세요!  
</div>

먼저 이런 소스가 하나 있고 여기서 특정 단어 “배곧동”에 하이라이트를 주려고 한다고 가정해봅시다.

$(“#notice”).html()을 보시면 html태그까지 모두 읽히는거 보이시나요?

“배곧동”을 태그로 감싸주고 css를 입힌다.

라는게 이번 포스팅의 핵심인데요- 소스를 한번 봐보겠습니다!

// html을 불러와서
var t = $("#notice").html();
// 내가 검색한 부분에 class를 씌우기
t = t.replace(value, "<font class='highlight'>"+value+"</font>");
// 적용
$("#notice").html(t);

주석을 달아놨는데 다시 한번 설명을 해드리면 replace를 사용하는겁니다! replace를 사용해서 배곧동을 <font class=”highlight”>배곧동</font> 로 만들어주는 것이지요.

간단히 만들어놓은 폼으로 한번 봐봅시다-

replace를 이용해서 font태그를 입혀주니 저렇게 내가 원하는 단어가 딱 쉽게 보이지요? 하이라이트 주기 참 쉽습니다-

하지만, 우리 여기서 한단계 더 나아가볼까합니다! “요” 를 검색했는데 가장 위에 하나만 하이라이트를 먹고 나머지는 먹지 않았습니다-

생각해보니 자바스크립트의 replace는 하나만 바꿔주고 끝나지요? replaceAll 이 불가능합니다!!

그렇기에 이걸 써줍니다.

function replaceAll(t, a, b){
    return t.split(a).join(b);
}

split와 join을 이용해 구현한 replaceAll. 이걸 써줌으로써 완전체로 완성! 소스를 한번 쭉 보자면

<!DOCTYPE>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<style type="text/css">
 .layout {width:200px; height: 200px; border: 1px solid #4374D9; border-radius: 10px; padding: 30px; text-align: center; margin: 50px;}
 .search{text-align: center; height: 30px;}
 .highlight{color:white; font-weight: bold; background-color: black;}
 .notice{margin-top: 20px; font-size: 13px; line-height: 2em}
</style>

<script type="text/javascript">
 // 최초값 저장하기 위한
 var ori = "";
 function init(){
  ori = $("#notice").html();
 }

 function search(value){
  // 최초값으로 초기화
  $("#notice").html(ori);
  // html을 불러와서
  var t = $("#notice").html();
  // 내가 검색한 부분에 class를 씌우기 (하나만 바뀜)
  // t = t.replace(value, "<font class='highlight'>"+value+"</font>");
  // 전체가 다 바뀌도록 replaceAll 구현
  t = replaceAll(t,value,"<font class='highlight'>"+value+"</font>");
  // 적용
  $("#notice").html(t);
 }
 
 // replaceAll 구현
 function replaceAll(t, a, b){
  return t.split(a).join(b);
 }
</script>


</head>
<body onload="init();">
 <div class="layout">
  <input class="search" type="text" placeholder="무엇을 표시할까?"  onkeydown="if(event.keyCode == 13){search(this.value);}" />
  <div class="notice" id="notice">
   안녕하세요, 배곧동개발자입니다<br/>
   아주 간단히 하이라이트를 주는 방법을 알아볼게요-<br/>
   위에 input에 텍스트를 넣고 엔터 눌러보세요!  
  </div>
 </div>
</body>
</html>

이런식으로 됩니다.

어떠신가요? 통합검색 비슷하게 뭔가 만들일이 있거나 문자열 검색을 하는 시스템을 만드실 때 필요한 기능! 로직을 고민할 때는 복잡해보였으나 막상 결과물을 보니 별거 없죠?

이것이 개발이 묘미! 다들 재미있게 개발합시다-

이만, 배곧동개발자 였습니다.

배곧동개발자