如何用JavaScript统计DOM段落元素中重复字母的出现次数？

Hey there! No sweat—since you already know how to count duplicate characters in a string, we just need to bridge the gap between your existing logic and the DOM paragraph element. Here's a step-by-step breakdown to solve this:

Step 1: Grab the Paragraph's Text Content #

First, you need to access the <p> element from the DOM and extract its text. Use document.getElementById() to target the element by its id, then use textContent (it’s more reliable for getting all underlying text compared to innerText) to pull out the actual string content:

// Get the paragraph element
const descriptionPara = document.getElementById('description');
// Extract its text content
const paraText = descriptionPara.textContent;

Pro tip: Always add a check to make sure the element exists, to avoid runtime errors:

if (!descriptionPara) {
  console.error("Couldn't find the paragraph element with id 'description'");
  return; // Exit early if element is missing
}

Step 2: Clean the Text (Optional but Recommended) #

Your paragraph has spaces, punctuation, and mixed-case letters—none of which are "letters" we care about for counting duplicates. Let’s clean the text to focus only on alphabetical characters, and normalize case so A and a are treated as the same:

// Convert to lowercase and remove all non-alphabet characters
const cleanedText = paraText.toLowerCase().replace(/[^a-z]/g, '');

The regex /[^a-z]/g matches any character that isn’t a lowercase letter, and replace() removes them entirely.

Step 3: Apply Your Existing String Counting Logic #

Now that you have a clean string, you can use the duplicate counting method you already know! For reference, here’s a simple implementation to tie it all together:

function countDuplicateLetters(str) {
  const letterCounts = {};
  
  // Count occurrences of each letter
  for (const char of str) {
    letterCounts[char] = (letterCounts[char] || 0) + 1;
  }
  
  // Filter to only letters that appear more than once, then count how many there are
  return Object.values(letterCounts).filter(count => count > 1).length;
}

Full Working Example #

Putting it all together into a single function you can call:

function countParagraphDuplicates() {
  // Step 1: Get the DOM element and text
  const descriptionPara = document.getElementById('description');
  if (!descriptionPara) {
    console.error("Paragraph element not found!");
    return 0;
  }
  const paraText = descriptionPara.textContent;
  
  // Step 2: Clean the text
  const cleanedText = paraText.toLowerCase().replace(/[^a-z]/g, '');
  
  // Step 3: Count duplicates
  const letterCounts = {};
  for (const char of cleanedText) {
    letterCounts[char] = (letterCounts[char] || 0) + 1;
  }
  
  // Return the number of letters that have duplicates
  return Object.values(letterCounts).filter(count => count > 1).length;
}

// Call the function and log the result
console.log("Number of duplicate letters:", countParagraphDuplicates());

Notes to Customize #

• If you want to count total duplicate instances (e.g., if "a" appears 3 times, that’s 2 duplicates) instead of the number of unique letters that repeat, replace the final return line with:

  return Object.values(letterCounts).reduce((total, count) => total + (count > 1 ? count - 1 : 0), 0);
  

• If you don’t want to normalize case (treating A and a as different), remove the .toLowerCase() call.

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