jQuery 로 문자열을 찾아 CSS 스타일을 적용하는 방법

A 라는 태그 안에서 특정 문자열을 찾아 CSS 스타일 속성을 적용하기 위해 아래와 같이 해 보았습니다.

일단, 문자열을 찾는 방법은 $('... :contains') 를 사용하면 되겠고..

찾은 문자열에만 속성을 주는 간단한 방법은 해당 문자열을 특정 태그로 감싸고 CSS 를 부여하는 것.

기존 레이아웃을 건드리지 않고 텍스트만 체크하려면 span 태그를 주면 좋은데,

전체 문자열을 감싸는 태그가 이미 span 이라서 뭘로 하면 좋을까 생각하다가 label 을 사용하기로..

문자열이 여러개 나오면 모두 적용해 주어야 하는데 어떻게 할까 하다가,

Java 의 replaceAll 메소드 기능을 구현하는 자바스크립트 코드가 필요한데..

split() 과 join() 함수를 사용하는 것으로 결정. 표현형을 사용해도 되긴 하는데, 다루기가 약간 껄끄럽네요.

다른 문자열을 찾아 동일한 CSS 속성을 부여하려면 이전에 찾았던 문자열에서 속성을 지울 필요가 있겠는데..

태그를 삭제하면서 하는건 DOM 구조를 건드리게 되는데 이렇게 하지 말고,

label 태그에 class 로 속성을 부여하고,

이전의 label 들에서 removeClass() 함수로 해당 클래스를 삭제하면 속성이 리셋...!

동일 단어를 체크하는 경우 label 속에 계속 label 태그가 들어가게 되므로,

label 태그가 들어간 문자열이 있으면 addClass() 함수를 사용하여 속성을 추가하는 것으로만 처리..

발견된 문자열로 화면 이동하는 것은 여러 방법이 있겠는데, 여기서는 scrollIntoView(true) 함수 사용.

자, 말이 길었는데.. 완성본을 보면 아래와 같습니다.

<style>

  span.s1 {font-wieght:normal; color:#777777}

  span.s1 label {font-wieght:normal; color:color:#777777} /* span.s1 과 spans1 label 은 동일 속성 */

  span.s1 label.b {font-weight:bold; color:red} /* spans1 label.b 인 경우에만 특별한 속성 */

</style>

<span class="s1">

  <tagA>...</tagA>

  .. 문자열1 <label class="b">문자열2</label> 문자열3 ..

  <tagB>...</tagB>

</span>

<script>

  function setStrAttr(Str2){ /* 필요한 곳에서 호출 */

    $('span.s1 label.b').removeClass('b'); /* 기존 문자열에 대한 문자 속성 리셋 */

    var $o = $('span.s1 label:contains("' +Str2+ '")');

    if($o.length>0) $o.addClass('b'); /* label 안에 label 태그를 포함한 문자열이 계속 들어가는 것을 방지 */

    else{

      $o = $('span.s1:contains("' +Str2+ '")');

      $o.each(function(){ $(this).html($(this).html().split(tag).join('<label class="b">' +Str2+ '</label>')); });

    }

    if($o.length>0) $o.get(0).scrollIntoView(true); /* 발견된 첫번째 위치로 이동. 발견된 것이 없으면 Stop. 발견된 DOM 구조가 없으면 통과 */

  }

</script>