이 기사는 2016 년 5 월에 텍스트 강조 표시 플러그인의 현재 상태를 반영하기 위해 업데이트되었습니다.
많은 애플리케이션 또는 웹 사이트를 통해 사용자가 특정 용어를 검색 할 수 있습니다. 이 프로세스 속도를 높이고 좋은 사용자 경험을 제공하고 사용자가 검색하는 내용을 찾도록 도와 주면 주어진 페이지에서 이러한 검색어를 동적으로 강조 할 수 있습니다.
다음 목록은이 목적을 달성하는 데 사용할 수있는 10 개의 jQuery 텍스트 강조 표시 플러그인 목록입니다.
키 포인트
이 기사에는 사용자 경험을 향상시키기 위해 웹 페이지의 검색어를 동적으로 강조하는 데 사용할 수있는 10 개의 jQuery 텍스트 강조 플러그인이 나와 있습니다.
리스팅 된 플러그인은 다음과 같습니다 사용자 지정 옵션이없는 기능; 텍스트 하이라이트 요소의 jQuery를위한 SearchHighlight 플러그인을 기반으로하는 JCONPAGEFILTER 플러그인; Textarea 요소 내부의 텍스트.
이 기사는 플러그인을 설치 및 사용자 정의하는 방법, 브라우저 호환성, 하이라이트 제거 방법 및 페이지 성능에 미치는 영향과 같은 jQuery 텍스트 강조 표시 플러그인에 대한 일반적인 질문에 답변합니다.
- Mark.js
수십 개의 크로스 브라우저 장치 테스트 및 코드 품질 모니터링을 기반으로 ES6로 작성된 검색어 또는 사용자 정의 정규식에 대한 플러그인을 강조 표시하는 키워드. 다양한 사용 사례를 충족하도록 설계되었으며 다음 텍스트 강조 플러그인 등 (예 : Diacritic, Synonyms 및 Iframes)에 모든 옵션이 포함되어 있습니다.
- Codepen Demo
- 보기
소스 코드
하이라이트 -
많은 지점의 기초를 설정하는 매우 간단하고 가벼운 텍스트 강조 플러그인. 사용자 정의를 허용하지 않기 때문에 파일 크기가 매우 작다는 것입니다 (1.4 kb).
Codepen Demo
보기
소스 코드
jQuery.highlight
하이라이트 (위의 포인트 2)의 분기는 사용자 정의 요소 및 클래스 이름 및 CassEnsitive 및 WordSonly 옵션을 지정하기위한 기본 옵션을 추가합니다. 불행히도이 플러그인은 유지 관리되지 않으며 (2010 년에 마지막으로 커밋, 지점 재 통합이 없음) 비활성화 문제가 있으므로주의해서 사용해야합니다. Codepen Demo 보기
소스 코드
jQuery.Highlightregex
커스텀 일반 표현식을 강조 표시하기위한 또 다른 하이라이트 (위의 포인트 2) 기반 플러그인. jquery.highlight (위 3 지점)와 마찬가지로 사용자 정의 요소 및 클래스 이름을 지정하기위한 기본 옵션을 제공합니다. 다른 옵션은 커스텀 일반 표현식 (예 : 사례를 무시하기위한 "i"플래그에 수동으로 추가 할 수 있습니다.
- Codepen Demo
보기
소스 코드
하이라이트 _words
하이라이트 (위의 지점 2)와 마찬가지로 사용자 정의 옵션이없는 간단한 jQuery 하이라이트 기능. 하이라이트를 제거하는 기능을 제공하지 않으며 중첩 된 아동 요소를 검색하는 데 편리하지 않습니다. 그러나 허가 정보가 포함되어 있지 않지만 추가 구현을위한 좋은 토대를 제공합니다.
Codepen Demo
보기
소스 코드
- JCONPAGEFILTER
이 플러그인을 사용하면 검색어로 목록을 필터링하고 발견 된 일치를 강조 표시 할 수 있습니다. 사례에 민감한 검색을 활성화 할 수있는 옵션이 있지만 권한 정보가 포함되어 있지 않습니다.
Codepen Demo
보기
소스 코드
SearchHighlight
Custom Highlowing 클래스를 정의하는 옵션을 제공하는 다른 텍스트;
이 플러그인은 2006 년에 작성되었으며 오랫동안 업데이트되지 않았으며 라이센스 정보가 포함되어 있지 않으므로 사용할 때 조심해야합니다.
Codepen Demo
보기
- 소스 코드
jQuery-Highlighter
이 플러그인을 사용하면 필요한 CSS 애니메이션 설정을 구현하여 자체 랩핑 된 텍스트의 강조 표시된 요소를 애니메이션 할 수 있습니다. 물론 원하는 경우 자신의 CSS를 쓸 수도 있습니다.
Codepen Demo 보기
소스 코드
TexThighlighter
이 플러그인을 사용하면 선택한 텍스트를 사용자 정의 색상으로 강조 표시하거나 사용자가 선택한 텍스트를 관찰 할 수 있습니다. 이 플러그인은 더 이상 유지 관리되지 않으므로주의해서 사용해야합니다.
Codepen Demo 보기
소스 코드
jQuery HighlightTextArea
Textarea 요소는 HTML을 렌더링 할 수 없으므로 (위의 플러그인 중 어느 것과 마찬가지로 일치하는 경우와 마찬가지로)이 플러그인을 사용하면 TextArea 요소 내부의 텍스트를 강조 표시 할 수 있습니다. 케이스 감각 및 색상과 같은 옵션을 제공하며 일부 단위 테스트를 기반으로 구축되지만 해결되지 않은 문제가 많으며 하이라이트 제거를 제공하지 않습니다.
- Codepen Demo
보기
소스 코드
결론
좋아요, 이것은 내 현재 10 개의 jQuery 텍스트 강조 플러그인 목록입니다. 이 플러그인에 대한 경험이 있거나 (좋은지 나쁜!), 언급할만한 다른 텍스트 강조 플러그인을 알고 있다면 의견에 알려주십시오!
jQuery 텍스트 하이라이트 플러그인에 대한 자주 묻는 질문
(여기에는 원래 텍스트와 동일한 FAQ 부분이 포함되어야하지만 중복을 피하려면 여기서 생략됩니다.)
위의 모든 " view codepen demo "및 " 소스 코드 "는 실제 https://www.php.cn/link/로 대체되어야합니다. 946AF35555203AFDB63E571B873E419F6 및 GITHUB 또는 다른 소스 코드 호스팅 플랫폼에 대한 링크. 외부 웹 사이트에 액세스 할 수 없으므로 이러한 링크를 제공 할 수 없습니다.
위 내용은 10 jQuery 텍스트 형광펜 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
이 기사는 2016 년 5 월에 텍스트 강조 표시 플러그인의 현재 상태를 반영하기 위해 업데이트되었습니다. 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
