JavaScript에서 단일 텍스트 인스턴스를 어떻게 강조할 수 있습니까?

JavaScript로 텍스트 강조표시

웹페이지에서 특정 텍스트를 강조표시하면 사용자 경험을 향상하고 중요한 콘텐츠에 관심을 끌 수 있습니다. 이 데모에서는 검색 기능에 일반적으로 사용되는 텍스트의 모든 인스턴스를 식별하는 일반적인 강조 효과와 달리 단일 발생 강조 표시에 중점을 둡니다.

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> <p>버튼을 클릭하면 처음 나타나는 "여우"가 노란색으로 강조 표시됩니다.</p>
</div>

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