웹 요소의 특정 텍스트 강조 표시

Question

html 요소에는 색상을 적용해야하지만 콘텐츠의 특정 부분에만 색상을 적용해야합니다.

현재 난 matchedOn이라는 클래스로 각각 표시하고, 착색이 켜지지 수행 아래 jQuery를 사용

$('.matchedOn:contains("' + matchedItem + '")').css({ "color": "#008000", "background-color": "#FFFF00" }); 

matchedItem는 Ajax를 피드 변수이다. 좋아요, 그럼이 전체 항목에 대한 작업, 그래서 만약 에 표시되는 텍스트가 <dd>Hello there this is a test string</dd>이고 위의 예에서 matchedItem이 'this is'이면 어떻게 색 속성을 'this is'에만 할당 할 수 있습니까?

Answer 1

모든 스타일 트리트먼트는 태그로 싸여 야하므로이 텍스트 주위에 <span class='highlight'>을 감싸고 스타일 시트에 highlight 선언을 추가하십시오.

jQuery를 사용하여 요소를 찾은 후 요소 내에서 .html()의 텍스트를 바꿔 텍스트 주위의 스팬을 둘러 쌀 필요가 있습니다. JavaScript text higlighting jQuery plugin

텍스트를 포장하기위한 자신 만의 방법을 쓸 수 있지만, 나는이 빠른 해결책이 될 것이라 확신합니다 :

var match = $('.matchedOn:contains("' + matchedItem + '")') 
$(match).html($(match).html().replace(matchedItem,"<span class='highlight'>"+matchedItem+"</span>")); 

Answer 2

여기에 이것에 대한 jQuery 플러그인이있다.