技术求助：基于HTML与JavaScript实现div类内单词搜索高亮及计数

Let's break this down into a straightforward, reusable implementation. I'll start with a sample HTML structure (adjust to match your actual file) and then the corresponding JavaScript that handles the search, highlighting, and count functionality.

Step 1: Sample HTML Structure #

First, here's a typical setup you might be working with (modify selectors to match your existing HTML):

<!-- Search controls -->
<input type="text" id="searchInput" placeholder="Enter word to search...">
<button onclick="searchAndHighlight()">Search</button>
<p>Occurrences found: <span id="countResult">0</span></p>

<!-- Target content divs (class we're searching within) -->
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="content">
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

Step 2: JavaScript Implementation #

Add this script (either in a separate .js file or a <script> tag in your HTML):

function searchAndHighlight() {
  // Get user input and target elements
  const searchTerm = document.getElementById('searchInput').value.trim();
  const contentDivs = document.querySelectorAll('.content');
  const countElement = document.getElementById('countResult');
  let totalOccurrences = 0;

  // Clear previous highlights first
  contentDivs.forEach(div => {
    div.innerHTML = div.textContent; // Reset to original text
  });

  // Exit if search term is empty
  if (!searchTerm) {
    countElement.textContent = '0';
    return;
  }

  // Create regex with word boundaries to match whole words only
  // Use 'gi' flags for global (all matches) and case-insensitive search
  const regex = new RegExp(`\\b${escapeRegExp(searchTerm)}\\b`, 'gi');

  // Process each target div
  contentDivs.forEach(div => {
    const text = div.textContent;
    const matches = text.match(regex);
    
    if (matches) {
      totalOccurrences += matches.length;
      // Replace matches with highlighted span
      div.innerHTML = text.replace(regex, match => `<span style="background-color: yellow;">${match}</span>`);
    }
  });

  // Update the count display
  countElement.textContent = totalOccurrences.toString();
}

// Helper function to escape special regex characters in search term
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

Key Details Explained #

• Clearing Previous Highlights: We reset each div's HTML to its original text before every search to avoid stacking highlights from repeated searches.
• Word Boundaries: The \b in the regex ensures we match whole words only (so searching "dolor" won't match "dolore").
• Case Insensitivity: The i flag makes the search case-insensitive; remove it if you need exact case matching.
• Escaping Special Characters: The escapeRegExp helper handles cases where the search term has regex special characters (like ., *, etc.) so they're treated as literal text.
• Counting Occurrences: We use text.match(regex) which returns an array of all matches, and sum their lengths across all target divs.

How to Use #

1. Make sure your HTML has:
   • An input field with ID searchInput (or update the JS selector to match your input's ID)
   • A button that triggers searchAndHighlight()
   • An element with ID countResult to display the occurrence count
   • All target content wrapped in divs with the class content (adjust the class name in document.querySelectorAll('.content') if your class is different)

That's it! This implementation will search all specified divs, highlight matching words in yellow, and show the total number of times the word appears.

内容的提问来源于stack exchange，提问作者Wolk