JavaScript로 일회성 텍스트 강조 효과를 어떻게 만들 수 있나요?

JavaScript로 텍스트 강조 표시: 일회성 집중 조명

웹 페이지에서 텍스트를 강조 표시할 때 우리는 종종 기본값을 사용합니다. 브라우저 기능. 하지만, 정밀한 일회성 하이라이팅 효과가 필요하다면 어떨까요? JavaScript를 사용하여 이를 구현하는 방법은 다음과 같습니다.

jQuery 강조 효과는 텍스트 강조를 위한 간단한 솔루션을 제공합니다. 그러나 원시 JavaScript 접근 방식을 찾고 있다면 다음 코드 조각을 고려하십시오.

function highlight(text) {
  const inputText = document.getElementById("inputText");
  const innerHTML = inputText.innerHTML;
  const index = innerHTML.indexOf(text);

  if (index >= 0) {
    innerHTML =
      innerHTML.substring(0, index) +
      `<span class='highlight'>` +
      innerHTML.substring(index, index + text.length) +
      `</span>` +
      innerHTML.substring(index + text.length);
    inputText.innerHTML = innerHTML;
  }
}

강조 표시 효과를 강조하려는 텍스트와 일치시키기 위해 몇 가지 CSS 규칙을 적용합니다.

.highlight {
  background-color: yellow;
}

이제 모두 정리해보자. 강조표시를 적용하려는 위치에 ID가 "inputText"인 HTML 요소를 만듭니다. 또한 "강조 표시" 기능을 트리거하는 onclick 이벤트가 있는 버튼을 추가합니다.

<button onclick="highlight('fox')">Highlight</button>

<div>

"강조 표시" 버튼을 클릭하면 JavaScript 코드는 텍스트에서 "fox"가 처음 나타나는 위치를 찾아 다음으로 묶습니다. "highlight" 클래스가 있는 요소입니다. 이 스팬 요소는 노란색 배경색을 적용하여 "여우" 텍스트를 돋보이게 합니다.

이 코드 샘플은 웹 페이지에서 텍스트를 강조 표시하는 간단하면서도 효과적인 방법을 제공합니다. 검색 텍스트를 사용자 정의하고 색상을 강조 표시할 수 있으며 필요한 경우 여러 항목을 강조 표시하는 기능을 확장할 수도 있습니다.

위 내용은 JavaScript로 일회성 텍스트 강조 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!