Ctrl+F底层实现

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'f') {
    // 触发搜索功能
    openSearchBox();
  }
});

function openSearchBox() {
  // 显示搜索框
  const searchBox = document.getElementById('searchBox');
  searchBox.style.display = 'block';
  searchBox.focus();
}

function performSearch(query) {
  const content = document.getElementById('content');
  const regex = new RegExp(query, 'gi');
  const matches = content.innerHTML.match(regex);

  if (matches) {
    // 高亮显示匹配的文本
    content.innerHTML = content.innerHTML.replace(regex, match => `<span class="highlight">${match}</span>`);
  } else {
    console.log('No matches found');
  }
}

document.getElementById('searchBox').addEventListener('input', function(event) {
  const query = event.target.value;
  performSearch(query);
});

let currentIndex = 0;
let matches = [];

function performSearch(query) {
  const content = document.getElementById('content');
  const regex = new RegExp(query, 'gi');
  matches = [...content.innerHTML.matchAll(regex)];

  if (matches.length > 0) {
    // 高亮显示所有匹配的文本
    content.innerHTML = content.innerHTML.replace(regex, match => `<span class="highlight">${match}</span>`);
    currentIndex = 0;
    scrollToMatch(currentIndex);
  } else {
    console.log('No matches found');
  }
}

function scrollToMatch(index) {
  const highlights = document.querySelectorAll('.highlight');
  if (highlights.length > 0) {
    highlights[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}

document.getElementById('nextButton').addEventListener('click', function() {
  if (matches.length > 0) {
    currentIndex = (currentIndex + 1) % matches.length;
    scrollToMatch(currentIndex);
  }
});

document.getElementById('prevButton').addEventListener('click', function() {
  if (matches.length > 0) {
    currentIndex = (currentIndex - 1 + matches.length) % matches.length;
    scrollToMatch(currentIndex);
  }
});