texthighlighter 다운로드 - texthighlighter 소스 코드 다운로드

texthighlighter

기타 소스코드

1.0.0

다운로드

텍스트 하이라이터

영역의 기능을 유지하면서 텍스트 영역의 검색 결과를 강조 표시하는 바닐라 JS 클래스입니다.

HTML이 아니기 때문에 텍스트 영역의 텍스트 스타일을 지정할 수 없으므로 이 클래스를 사용하여 텍스트 영역의 텍스트를 강조 표시할 수 있습니다. 검색결과 등.

스크린샷

데모를 확인하세요{:target="_blank"}

특징

종속성이 없습니다.
구성이 없습니다. 클래스를 인스턴스화하고 메서드를 호출하면 됩니다.
필요한 만큼 많은 텍스트 영역에서 사용할 수 있으며 각 텍스트 영역에 대해 인스턴스화하기만 하면 됩니다.
반응형. 표시는 화면 크기, 텍스트 영역 크기 및 스크롤에 따라 조정됩니다.
텍스트 영역의 원래 배경을 유지합니다.
적절하게 파괴할 수 있습니다. 모든 이벤트와 구조가 제거됩니다.
대소문자 구분 검색과 구분하지 않는 검색 중에서 선택할 수 있습니다.
자유롭게 검색하거나 단어로만 검색할 수 있습니다.
발견된 결과 수를 제공합니다.
검색 결과를 탐색하여 필요에 따라 표시할 수 있습니다.

사용법은 매우 간단합니다. 필요한 텍스트 영역에 대한 클래스를 인스턴스화하고 검색 메서드를 호출하여 첫 번째 인수에 전달한 텍스트를 강조 표시합니다. 두 번째 인수는 선택 사항이며 true인 경우 검색 대소문자를 구분하는 부울을 사용합니다. 기본값은 대소문자를 구분하지 않습니다. 마지막 인수는 true인 경우 단어 검색을 수행하는 부울 값도 사용합니다. 그렇지 않으면 단어의 어떤 부분이라도 일치할 수 있는 무료 검색입니다.

사용법 및 코드 예

프로젝트에 다음 파일을 추가합니다.

텍스트하이라이터.js
텍스트하이라이터.css

 let tarea = document . getElementById ( 'txt' ) ;
let hilite = new textHighlight ( tarea ) ;

let searchResult = 'Some Expression' ;
let sens = true ;                        // Case sensitive. Optional, default: false
let word = true ;                        // Perform a words only search. Optional, default: false
hilite . search ( searchResult , sens , word ) ;

발견된 항목 수에 액세스하려면 다음을 사용하십시오.

 let count = hilite . count ( ) ;

prev 및 next 방법을 사용하여 강조 표시된 결과 사이를 앞뒤로 탐색할 수 있습니다. 이 탐색은 순환적입니다. 즉, 끝에 도달하면 다음 호출이 시작 부분으로 돌아가고 그 반대의 경우도 마찬가지입니다. 아래 예:

 let btnPrev = document . getElementById ( 'prev' ) ;
let btnNext = document . getElementById ( 'next' ) ;

btnPrev . addEventListener ( 'click' , hilite . prev ) ;
btnNext . addEventListener ( 'click' , hilite . next ) ;