jQuery를 사용하여 텍스트 내의 특정 단어를 어떻게 강조할 수 있습니까?
Dec 07, 2024 pm 08:40 PMjQuery로 단어 강조표시
질문:
텍스트 블록에서 특정 단어를 강조표시하세요. 예를 들어 다음 텍스트에서 "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, "\$&amp;&quot;"); return this.each(function() { $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>")); }); }; $("p").highlight("dolor");
로그인 후 복사
설명:
- $.fn.highlight는 단어를 매개변수입니다.
- 패턴 변수는 word.
- each 함수는 일치하는 모든 요소(이 경우 단락 태그)를 반복하고 해당 단어를 <span> 태그로 묶습니다.
- 마지막으로, $("p").highlight("dolor") 행은 사용자 정의 함수를 호출하고 "dolor"를 단어로 전달합니다.
참고:
특정 요구 사항을 충족하고 추가 기능을 제공하는 다양한 jQuery 기반 솔루션과 외부 플러그인을 사용할 수 있습니다. 귀하의 요구 사항에 가장 적합한 옵션을 찾으려면 다음 옵션을 살펴보십시오.
위 내용은 jQuery를 사용하여 텍스트 내의 특정 단어를 어떻게 강조할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
2 포인트 박물관 : 모든 전시회 및 찾을 수있는 곳
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
2 포인트 박물관 : 모든 전시회 및 찾을 수있는 곳
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7128
9


자바 튜토리얼
1534
14


라라벨 튜토리얼
1256
25


PHP 튜토리얼
1205
29


Cakephp 튜토리얼
1153
46

