如何统计输入文本框中指定字符串的字符出现次数？

问题分析 #

现有代码无法实现需求的原因：

• showText函数当前仅实现重复输入文本的功能，未调用字符统计逻辑
• Char_Counts函数仅在控制台测试固定字符串，未关联用户输入的文本
• 正则/\S/g会忽略空格字符，若需要统计所有字符需调整规则

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>字符统计工具</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<style>
    body {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
  font-family: 'Poppins', sans-serif;
}
</style>
<script type="text/javascript">
    window.onload = btn;

function btn() {
  document.getElementById("btn").onclick = countCharacters;
}

// 字符统计核心函数，可选择是否包含空格
function Char_Counts(str1, includeSpaces = true) {
  const uchars = {};
  // 匹配所有字符（包括空格）或仅非空格字符
  const regex = includeSpaces ? /./g : /\S/g;
  str1.replace(regex, function(l){
    uchars[l] = (isNaN(uchars[l]) ? 1 : uchars[l] + 1);
  });
  return uchars;
}

// 处理用户输入并展示结果
function countCharacters() {
  const inputText = document.getElementById("txtBox").value;
  if (!inputText) {
    document.getElementById("showCode").innerHTML = "<p>请输入文本</p>";
    return;
  }
  // 调用统计函数，这里设置为包含空格，若不需要则传false
  const charCounts = Char_Counts(inputText);
  // 将统计结果转换为可读的HTML格式
  let resultHtml = "<h4>字符统计结果：</h4><ul>";
  for (const [char, count] of Object.entries(charCounts)) {
    // 处理空格的显示，避免看不见
    const displayChar = char === " " ? "空格" : char;
    resultHtml += `<li>*${displayChar}*: ${count} 次</li>`;
  }
  resultHtml += "</ul>";
  document.getElementById("showCode").innerHTML = resultHtml;
}

</script>
    </head>

<body style="text-align:center;">
    <h1 style="color:green;">
        字符统计工具
    </h1>
    <p>
        输入需要统计的文本：
    </p>
<div class="container">
    <input type="text" id="txtBox" placeholder="输入文本..." class="form-control mb-3"><br/>
<button type="button" id="btn" class="btn btn-warning">统计字符次数</button> <br/>

<div id="showCode" class="mt-3 text-white"></div>
</div>
</body>

</html>

关键改动说明 #

• 将按钮点击事件绑定到countCharacters函数，替代原有的重复文本逻辑，专注字符统计
• 优化Char_Counts函数，增加参数控制是否统计空格，适配不同需求
• 增加空输入提示，提升用户体验
• 将统计结果转为清晰的列表格式，空格字符特殊标注为“空格”以便识别
• 移除无关的数字输入框，简化界面

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