现有HTML页面高亮TXT中@，如何统计div内@符号出现次数？

嘿，这事儿其实挺容易实现的，咱们只需要在你现有的代码里加个计数器，然后把结果展示到指定区域就行。下面是具体的修改步骤和完整代码：

核心思路 #

• 初始化一个计数器，用来记录@的出现次数
• 每次处理一个@符号时，让计数器加1
• 所有文本处理完成后，把计数器的值更新到页面上的populateNumbers容器里

修改后的完整代码 #

JavaScript 部分 #

var openFile = function(event) {
  var input = event.target;
  var reader = new FileReader();
  reader.onload = function() {
    var text = reader.result;
    var output = document.getElementById('output');
    // 初始化计数器，每次加载新文件都重置为0
    let atCount = 0;
    
    // 清空之前的输出和计数显示，避免叠加
    output.innerHTML = '';
    document.getElementById('populateNumbers').innerHTML = '';
    
    const lines = text.split('\n');
    lines.forEach((line) => {
      const div = output.appendChild(document.createElement('div'));
      const textSplitAroundAt = line.split('@');
      textSplitAroundAt.forEach((text, i) => {
        div.appendChild(document.createTextNode(text));
        if (i === textSplitAroundAt.length - 1) return;
        const span = div.appendChild(document.createElement('span'));
        span.textContent = '@';
        span.className = 'colorize';
        // 每创建一个@的span，计数器加1
        atCount++;
      });
    });
    
    // 处理完所有文本后，把计数结果显示到指定区域
    document.getElementById('populateNumbers').textContent = 
      `I would like the number of times '@' symbol appears here >>> ${atCount}`;
  };
  reader.readAsText(input.files[0]);
};

CSS 部分（保持不变） #

.colorize { color: #f90; background-color: blue; }

HTML 部分（保持不变） #

<center> <h1>.TXT Log Parser</h1> </center>
<center> <div id="populateNumbers">I would like the number of times '@' symbol appears here >>> ... </div> </center>
<center> <h2><input type='file' accept='text/plain' onchange='openFile(event)'></h2> </center>
<br/>
<div id='output'>...</div>

关键改动说明 #

• 新增了atCount变量，每次加载新文件时重置为0，避免多次加载文件后计数叠加
• 在创建每个@的<span>元素时，执行atCount++来累加次数
• 处理完所有行后，把计数结果插入到populateNumbers元素中，替换原来的占位文本
• 新增了清空output和populateNumbers的逻辑，确保每次加载新文件时页面是干净的

这样处理后，每次你上传新的TXT文件，页面就会自动统计并显示@符号的总出现次数啦～

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