中文重复统计器

文字重复统计是一个使用文本处理工具， 输入文本内容并指定最小词长度后， 就能自动高亮显示重复的词。 本教程将会借助AI实现这个应用的开发

页面脚本编写

该工具的基础流程较为清晰：用户输入一段文字后，调用提取算法处理重复词汇，据此可提出以下问题

提问 （Round 1）

 export default {name: 'HighlightText',state: {originalText: '', // 需要处理的文本textMinLenth: 2, // 最小词长度duplicated: [], // 重复的单词},actions: {extractText () { // 提取重复文本}}
}

上述脚本实现extractText方法 对state.originalText 提取出重复的文本，根据textMinLenth
最小词长度（最小为2） 将结果写入duplicated, 每项包含结果词及高亮颜色（要求不同）。
同时统计文本换行、符号、和字符数也写入state

返回

extractText() {// 重置状态this.state.duplicated = [];// 统计换行符数量const lineCount = (this.state.originalText.match(/\n/g) || []).length;// 统计符号数量（非字母、数字、空格和换行符）const symbolCount = (this.state.originalText.match(/[^a-zA-Z0-9\s\n]/g) || []).length;// 统计字符总数（包括空格和换行符）const charCount = this.state.originalText.length;// 更新统计信息this.state.lineCount = lineCount;this.state.symbolCount = symbolCount;this.state.charCount = charCount;// 提取单词并统计词频const words = this.state.originalText.toLowerCase().match(/[a-z0-9]+/g) || [];const wordCount = {};words.forEach(word => {if (word.length >= this.state.textMinLenth) {wordCount[word] = (wordCount[word] || 0) + 1;}});// 找出重复的单词const duplicatedWords = Object.entries(wordCount).filter(([word, count]) => count > 1).map(([word, count]) => word);// 为每个重复的单词分配不同的高亮颜色const colors = ['rgba(255, 99, 132, 0.5)', // 红色'rgba(54, 162, 235, 0.5)', // 蓝色'rgba(255, 206, 86, 0.5)', // 黄色'rgba(75, 192, 192, 0.5)', // 绿色'rgba(153, 102, 255, 0.5)', // 紫色'rgba(255, 159, 64, 0.5)', // 橙色'rgba(231, 233, 237, 0.5)'  // 灰色];// 为每个重复的单词创建对象，包含单词和颜色this.state.duplicated = duplicatedWords.map((word, index) => ({word,color: colors[index % colors.length]}));
}

AI迅速理解了需求并在短时间内给出了算法结果。遗憾的是，该算法无法有效提取中文内容。

通过分析结果可以看出，该工具在处理重复内容时采用了与英文相同的逻辑，将空格或标点作为单词分隔的依据。然而，这种处理方式并不适用于中文（事实上，使用国外的重复检测工具也会得出相同结论）。

提问 （Round 2）

就这个问题再次提问后，AI回答

你指出的问题很关键，中文文本的分词确实需要特殊处理。之前的实现依赖空格来分割单词，这对中文无效。我将修改代码，使用更适合中文的分词方式。

同时它还说

这个实现应该能满足中文文本的重复词统计需求。如果你需要更复杂的中文分词（例如按词语而不是单字），可能需要集成专门的中文分词库，如 jieba 或 segmentit。

中文分词确实是一个专门的领域。尽管如此，我还是尝试用改进后的算法，但早已预料到效果可能不佳。果然，算法未能正确统计中文内容。通过观察发现，AI在处理时出现了顾此失彼的问题：将每个中文字符都视为独立单词，再加上最小长度的限制条件，最终导致统计失败。

提问 （Round 3）
我继续提问：

上述算法，中文也是要求大于最小长度才纳入统计的，不能把每个字作为一个词

然后AI回答

你是对的，我之前的实现错误地将每个中文字符单独作为一个词统计了。现在我将修改代码，让中文和英文都遵循 textMinLenth 的限制，按连续字符作为词进行统计。

返回的代码仍存在准确性不足的问题。我发现它先进行了分词操作再进行统计，而该算法在实际应用中难以奏效。至此，我确实感到有些失望，但仍需进一步给出提示。

提问 （Round 4）
提问：

我想要的是先统计重复，例如 你好会匹配所有你好。 而不是先分词出你好

这一次终于有了转机，因为他提到了一个我之前从未听说的算法——滑动窗口。光是这个名字，就让我觉得很有希望。于是我试着输入了一段中文来测试效果。

观察发现，统计结果并非完全准确。例如，4%的球员与4%与%的球员存在重复统计的情况。尽管如此，总体而言，该结果仍具有相当的准确度。

提问 （Round 5）

为了安慰它，这次我说

基本正确了。 但是还有2个问题： 1、中文的逗号、句号等符号不能作为重复统计。 2、还存在一个长字符串 会匹配到2个不同短的字符串的情况。 这看起来无法避免， 能否将算法调整为统计作为重复后， 内容就不参加其他的重复统计了

很幸运的是AI也完全理解了问题

我理解了你的需求，现在需要解决两个关键问题：排除中文标点符号的干扰，以及避免重复统计重叠的文本片段。这需要更复杂的匹配策略和后处理逻辑。

虽然理解，但AI给出的算法仍然无法满足要求。

提问 （Round 6）

还是计算不出结果。 还不如最早的几个版本。 是否可以这样， 首先将中文标点替换为空格，然后对中文字符使用滑动窗口算法， 并且空格就默认为分词标志

这回终于， 它给出了一个还不错的算法

extractText() {// 重置状态this.state.duplicated = []// 统计换行符数量const lineCount = (this.state.originalText.match(/\n/g) || []).length// 统计符号数量（非字母、数字、中文、空格和换行符）const symbolCount = (this.state.originalText.match(/[^a-zA-Z0-9\u4e00-\u9fa5\s\n]/g) || []).length// 统计字符总数（包括空格和换行符）const charCount = this.state.originalText.length// 更新统计信息this.state.lineCount = lineCountthis.state.symbolCount = symbolCountthis.state.charCount = charCount// 预处理：将中文标点替换为空格const punctuationRegex = /[\u3000-\u303F\uFF00-\uFF60\uff0c\uff1a\uff1b\uff01\uff1f\uff0e]/gconst processedText = this.state.originalText.replace(punctuationRegex, ' ')// 提取所有可能的子串并统计频率const substrCount = {}const minLength = Math.max(2, this.state.textMinLenth) // 确保最小长度至少为2// 按空格分割文本为单词数组const words = processedText.split(/\s+/)// 对每个单词使用滑动窗口提取所有可能的子串words.forEach(word => {if (!word) return // 跳过空单词// 提取所有长度 >= minLength 的子串for (let i = 0; i < word.length; i++) {for (let j = i + minLength; j <= word.length; j++) {const substr = word.substring(i, j)substrCount[substr] = (substrCount[substr] || 0) + 1}}})// 找出重复的子串（出现次数 > 1），按长度降序排列const duplicatedSubstrs = Object.entries(substrCount).filter(([substr, count]) => count > 1).sort((a, b) => b[0].length - a[0].length)// 筛选最终结果，避免重叠const filteredSubstrs = []duplicatedSubstrs.forEach(([substr, count]) => {// 检查是否已被更长的子串包含if (!filteredSubstrs.some(s => s.includes(substr) && s !== substr)) {filteredSubstrs.push(substr)}})// 为每个重复的子串分配不同的高亮颜色const colorVariations = ['#F53F3F', // semi-red-6'#EB2F96', // semi-pink-6'#722ED1', // semi-purple-6'#5B32C9', // semi-violet-6'#2F54EB', // semi-indigo-6'#1890FF', // semi-blue-6'#0FC6C2', // semi-light-blue-6'#00B42A', // semi-green-6'#7CB305', // semi-lime-6'#FACC14', // semi-yellow-6'#FF7D00' // semi-orange-6]    // 为每个重复的子串创建对象，包含text和style属性this.state.duplicated = filteredSubstrs.map((substr, index) => ({text: substr,style: {backgroundColor: colorVariations[index % colorVariations.length],color: '#fff',padding: 4}}))}

页面制作

我将Bootstrap的多行输入和高亮组件整合到页面中，并设置按钮点击时触发提取算法功能。 每次算法给出结果后，都可以快速验证。

具体配置如下：
多行输入：取值连接到”需要处理的文本“
高亮组件：内容连接到”需要处理的问题“， 高亮文本连接到”重复的单词“

为了显示哪些词汇重复了，需要放入一个列表组件， 数据就连接到”重复的单词“，在里面放入弹性容器/文本，
为页面脚本库增加计算2个字段如下，

...computed: {itemWordText: scope => scope.item.text, // 重复单项文本itemBackgroundColor: scope => scope.item.style.backgroundColor // 单项背景颜色}
...
}

将列表内的文本的内容和背景颜色分别连接到这2个字段 。这样提取后右侧会显示重复词列表

最后，增加一个watch字段，使得用户修改文本时，直接进行统计无需再点击按钮。将之前按钮删除

  watch: {originalText () {this.extractText()}},

最后，调整和美化整个页面布局 这个工具就算制作好了

小结

1. 相比之前的密码生成器，这款统计重复算法的AI经过多次交互优化，最终呈现出令人满意的效果。
2. 从功能设计的角度来看，这个需求对人类程序员而言通常无需多次解释。人类开发者完成编写后，能够自行验证结果是否符合需求。但人工智能在这方面的能力明显欠缺，需要反复澄清和细化具体要求。
3. 当AI输出结果不符合预期时，有些问题可以直接通过结果反馈发现，但有些需要深入代码层面才能识别。这就要求使用者具备一定的代码阅读和理解能力，才能有效引导AI进行调整。从这个角度来看，AI更像是辅助工具而非开发的主导者。
4. 保持耐心尤为关键
   当算法多次输出错误结果时，我的做法是明确指出初始版本更合适，并引导它仅针对特定方面进行调整。这很关键，因为虽然条条大路通罗马，但人类通常更擅长找到更合理且复杂度更低的解决方案路径。

最后的最后，从效率上来说，虽然多次提示并花时间去阅读生成代码给出解决建议，但AI整体输出速度还是比我要快，并且更加省心。

大家可以通过这个地址访问应用，
https://ridgeui.com/npm/ridge-duplicate/
或者通过设计器打开自己更改和验证
https://ridgeui.com/npm/ridge-editor/?import=ridge-duplicate