Vue.js实现重复句子高亮功能遇到问题求助

开发者阿泽

2026-8-6

文本域重复句子高亮修复方案

原代码存在的问题

仅用.分割句子，无法适配!、?等其他句末标点，还会丢失原句的标点符号
逻辑只标记后续重复的句子，第一次出现的重复句不会被高亮
遇到连续标点时会生成空字符串，导致误判

修正后的代码

highlightRepeated(str) {
  // 匹配完整句子，支持.!?结尾并保留原标点
  const sentenceRegex = /([^.!?]+[.!?])/g;
  let sentences = str.match(sentenceRegex) || [];
  // 存储各句子的出现次数
  const sentenceCount = {};

  // 第一次遍历统计所有句子的出现次数
  sentences.forEach(sentence => {
    const trimmedSent = sentence.trim();
    sentenceCount[trimmedSent] = (sentenceCount[trimmedSent] || 0) + 1;
  });

  // 第二次遍历标记所有重复出现的句子
  sentences = sentences.map(sentence => {
    const trimmedSent = sentence.trim();
    return sentenceCount[trimmedSent] > 1 ? `<mark>${sentence}</mark>` : sentence;
  });

  // 拼接回原文本格式
  return sentences.join('');
}