JavaScript를 사용하여 웹 페이지에서 특정 텍스트 발생을 어떻게 강조할 수 있습니까?

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;
}

사용법

HTML 파일을 만들고, 코드를 붙여넣고, 입력 텍스트를 포함하세요. 필드:

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

<div>

"강조 표시"를 클릭하면 처음 나타나는 "여우"가 노란색으로 강조 표시됩니다.

위 내용은 JavaScript를 사용하여 웹 페이지에서 특정 텍스트 발생을 어떻게 강조할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!