jQuery를 사용하여 텍스트 내의 특정 단어를 어떻게 강조할 수 있습니까?

jQuery로 단어 강조표시

질문:

텍스트 블록에서 특정 단어를 강조표시하세요. 예를 들어 다음 텍스트에서 "dolor"를 강조 표시합니다.

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

예상 결과:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

jQuery 솔루션:

예, jQuery를 사용하면 이러한 효과를 얻을 수 있습니다. 다음 코드 조각은 솔루션을 제공합니다.

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&</span>"));
  });
};

$("p").highlight("dolor");

설명:

1. $.fn.highlight는 단어를 매개변수입니다.
2. 패턴 변수는 word.
3. each 함수는 일치하는 모든 요소(이 경우 단락 태그)를 반복하고 해당 단어를 <span> 태그로 묶습니다.
4. 마지막으로, $("p").highlight("dolor") 행은 사용자 정의 함수를 호출하고 "dolor"를 단어로 전달합니다.

참고:

특정 요구 사항을 충족하고 추가 기능을 제공하는 다양한 jQuery 기반 솔루션과 외부 플러그인을 사용할 수 있습니다. 귀하의 요구 사항에 가장 적합한 옵션을 찾으려면 다음 옵션을 살펴보십시오.

위 내용은 jQuery를 사용하여 텍스트 내의 특정 단어를 어떻게 강조할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!