JavaScript에서 단일 텍스트 인스턴스를 어떻게 강조할 수 있습니까?
Dec 04, 2024 am 11:16 AMJavaScript로 텍스트 강조표시
웹페이지에서 특정 텍스트를 강조표시하면 사용자 경험을 향상하고 중요한 콘텐츠에 관심을 끌 수 있습니다. 이 데모에서는 검색 기능에 일반적으로 사용되는 텍스트의 모든 인스턴스를 식별하는 일반적인 강조 효과와 달리 단일 발생 강조 표시에 중점을 둡니다.
jQuery 강조 효과
빠르고 쉬운 솔루션을 위해 jQuery 강조 효과를 사용할 수 있습니다.
$(selector).highlight(text, options);
로그인 후 복사
단순히 텍스트 및 강조 옵션을 지정하여 원하는 결과를 얻으세요.
사용자 정의 JavaScript 코드
원시 JavaScript 접근 방식을 선호하는 경우 다음 코드 조각을 고려하세요.
function highlight(text) { // Get the target element var inputText = document.getElementById("inputText"); // Extract the element's HTML content var innerHTML = inputText.innerHTML; // Locate the first occurrence of the text var index = innerHTML.indexOf(text); // Check if text is found if (index >= 0) { // Inject highlight markup around the matching text innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length); // Update the element with highlighted text inputText.innerHTML = innerHTML; } }
로그인 후 복사
하지 마세요. '강조 표시'에 해당 CSS 스타일을 추가하는 것을 잊지 마세요. class:
.highlight { background-color: yellow; }
로그인 후 복사
사용 예
특정 div 요소에서 "fox"라는 단어를 강조 표시하려면 간단히 강조 표시 기능을 호출하세요.
<button onclick="highlight('fox')">Highlight</button> <div>
로그인 후 복사
버튼을 클릭하면 처음 나타나는 "여우"가 노란색으로 강조 표시됩니다.
위 내용은 JavaScript에서 단일 텍스트 인스턴스를 어떻게 강조할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

인기 기사
Repo : 팀원을 부활시키는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 기사 태그

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

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

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

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

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

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


자바 튜토리얼
1622
14


Cakephp 튜토리얼
1342
46


라라벨 튜토리얼
1258
25


PHP 튜토리얼
1205
29

