JavaScript는 어떻게 웹 페이지에서 하나의 텍스트 인스턴스만 강조 표시할 수 있습니까?

JavaScript로 텍스트 강조하기

이 질문은 웹 페이지의 텍스트를 강조 표시할 수 있는 JavaScript 기능을 찾고 있으며, 특정 요구 사항만 강조 표시합니다. 텍스트의 한 번 발생합니다. 제공된 솔루션을 자세히 살펴보고 이 기능을 구현하는 방법을 살펴보겠습니다.

jQuery 강조 효과

응답자는 이 작업에 jQuery 강조 효과를 활용할 것을 제안했습니다. 그러나 제공된 코드는 정확한 강조 표시가 가능한 원시 JavaScript 구현을 보여줍니다.

JavaScript 구현

특정 텍스트를 강조 표시하기 위해 JavaScript 코드는 텍스트를 식별하여 초기화합니다. 페이지 내의 요소입니다. 다음으로 요소의 내부 HTML 내에서 대상 텍스트를 검색합니다. 발견되면 코드는 대상 텍스트 주위에 'highlight' 클래스가 있는 범위 요소를 동적으로 생성합니다. 그런 다음 이 범위 요소가 페이지에 다시 삽입되어 대상 텍스트를 래핑하고 원하는 강조 스타일을 적용합니다.

사용 및 주의 사항

제공된 코드를 사용하려면 JavaScript 및 CSS 조각을 HTML 문서에 통합해야 합니다. onclick="highlight('fox')" 속성이 있는 버튼 요소를 클릭하면 코드는 "inputText" div에서 "fox"라는 단어가 처음 나타나는 위치를 찾아 강조 표시합니다.

참고할 가치가 있습니다. 이 접근 방식은 더 작은 텍스트 크기와 단일 텍스트 발생에 적합합니다. 보다 광범위한 강조 표시 요구 사항이 있는 경우 보다 포괄적인 솔루션을 활용하거나 대체 기술을 고려하는 것이 더 나을 수 있습니다.

위 내용은 JavaScript는 어떻게 웹 페이지에서 하나의 텍스트 인스턴스만 강조 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!