在同一个JavaScript函数中创建多个span元素的实现方法

嘿，这个问题我太熟了！完全可以用数组来搞定，而且这绝对是最优解——不仅能解决你现在Google和@没法高亮的问题，以后要加新的关键词也超级省心，不用重复写一堆重复逻辑～

为什么用数组？ #

你之前单独处理Microsoft的方式，相当于把匹配、计数、高亮的逻辑写了一遍，如果要给Google和@做同样的事，就得复制粘贴三次代码，不仅冗余，以后改逻辑或者加新关键词还得挨个改。用数组把所有关键词的配置（匹配文本、计数、高亮样式）统一管理，然后循环遍历处理，一次逻辑搞定所有情况，代码更简洁也更好维护。

具体实现步骤 #

1. 定义关键词配置数组 #

先把所有需要处理的关键词、计数变量、高亮用的CSS类名放到一个数组里，每个元素是一个对象：

// 定义所有需要处理的关键词配置
const keywordConfigs = [
  { keyword: '@', count: 0, className: 'highlight-at' },
  { keyword: 'Microsoft', count: 0, className: 'highlight-microsoft' },
  { keyword: 'Google', count: 0, className: 'highlight-google' }
];

2. 写通用的转义和处理函数 #

因为@是正则表达式的特殊字符，直接匹配会报错，所以先写一个转义函数，把特殊字符转成正则能识别的格式；然后写一个通用的处理函数，遍历数组完成计数和高亮替换：

// 转义正则特殊字符（比如@、$这类）
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 处理日志内容：统计次数 + 高亮关键词
function processLogContent(content) {
  let processedContent = content;
  
  // 先重置所有关键词的计数
  keywordConfigs.forEach(config => {
    config.count = 0;
  });

  // 遍历每个关键词配置，统一处理
  keywordConfigs.forEach(config => {
    const escapedKeyword = escapeRegExp(config.keyword);
    // 全局匹配（g），可选不区分大小写（i），根据你的日志需求调整
    const regex = new RegExp(escapedKeyword, 'gi');
    
    // 统计出现次数
    const matches = processedContent.match(regex);
    if (matches) {
      config.count = matches.length;
    }

    // 把匹配到的文本替换成带样式的span
    processedContent = processedContent.replace(regex, `<span class="${config.className}">$&</span>`);
  });

  return processedContent;
}

3. 整合到文件加载逻辑里 #

当你把TXT文件内容读取出来后，调用上面的处理函数，再把结果插入到目标div里，同时还能方便地展示每个关键词的计数：

// 假设你已经读取到了日志文件内容，存在fileContent变量里
const processedContent = processLogContent(fileContent);

// 把处理后的内容插入到日志容器div
document.getElementById('log-container').innerHTML = processedContent;

// 展示各关键词的统计次数
const countDisplay = document.getElementById('count-display');
countDisplay.innerHTML = keywordConfigs.map(config => 
  `<p><strong>${config.keyword}</strong>: ${config.count} 次</p>`
).join('');

4. 添加对应的CSS样式 #

最后给每个高亮类写样式，让不同关键词有不同的视觉效果：

.highlight-at {
  color: #ff4757;
  font-weight: bold;
  background-color: #ffebee;
}

.highlight-microsoft {
  color: #00a4ef;
  font-weight: bold;
  background-color: #e3f2fd;
}

.highlight-google {
  color: #4285f4;
  font-weight: bold;
  background-color: #e8f0fe;
}

这样做的好处 #

以后你要加新的关键词（比如Apple、Amazon），只需要在keywordConfigs数组里加一行配置，再补个CSS样式就行，完全不用改处理逻辑，扩展性拉满～

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