如何为重复单词分配唯一索引并在复制粘贴文本时保留该索引

我太懂你现在的头疼点了！原来的代码用普通对象存单词和索引，只要单词重复，后面的索引就会直接覆盖前面的，结果所有相同的单词都共用同一个索引，完全没法区分它们在原始文本里的不同出现位置——这肯定没法对应到数据库里的唯一时间码啊！

要解决这个问题，核心得让每个单词的每一次出现都绑定专属的唯一标识，不管用户怎么复制粘贴，这个标识都能跟着走。我给你提供一个简单可靠的方案，用「零宽字符」来隐藏索引信息——这种字符用户完全看不到，但复制粘贴时会自动跟着文本一起走，完美解决追踪问题：

修改后的完整代码 #

HTML 部分

<h1>Word Index Tracker</h1>
<p>Original Text: <span id="original-text"></span></p>
<textarea id="text-box" rows="5" cols="50" placeholder="Paste text from original here to see unique indexes"></textarea>
<div id="output">Indexes will appear here...</div>

CSS 部分

#output {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #f9f9f9;
}

#original-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

JavaScript 部分

// 零宽空格字符：完全不可见，但复制粘贴时会被携带
const ZERO_WIDTH_SPACE = '\u200B';

// 原始文本和处理逻辑
const originalString = "As you can see the script does not give unique indexes to words that are duplicated in the script. The gets the same index throughout the script.";
const originalWords = originalString.split(/\s+/);

// 给原始文本的每个单词绑定唯一索引，用零宽字符隐藏
const indexedOriginalText = originalWords
  .map((word, index) => `${word}${ZERO_WIDTH_SPACE}${index}`)
  .join(' ');
// 显示给用户的是正常文本（零宽字符不可见）
document.getElementById('original-text').innerText = indexedOriginalText;

// 文本框和结果输出元素
const textBox = document.getElementById('text-box');
const output = document.getElementById('output');

// 监听文本框输入，解析粘贴内容的唯一索引
textBox.addEventListener('input', () => {
  const pastedContent = textBox.value;
  // 拆分粘贴的内容，过滤出带索引的单词
  const indexedWords = pastedContent.split(/\s+/).filter(item => item.includes(ZERO_WIDTH_SPACE));
  // 提取每个单词的唯一索引
  const uniqueIndexes = indexedWords.map(item => {
    const [_, index] = item.split(ZERO_WIDTH_SPACE);
    return index;
  });
  // 显示结果
  output.innerText = `Unique Indexes of Pasted Words: ${uniqueIndexes.join(', ')}`;
});

方案说明 #

1. 零宽字符的妙用：用\u200B这个零宽空格字符把单词和它的原始索引拼接在一起，用户完全看不到这个字符，但复制粘贴时它会跟着文本一起被复制，相当于给每个单词偷偷加了个「身份证号」。
2. 完美区分重复单词：不管同一个单词在原始文本里出现多少次，每个出现的位置都对应唯一的索引，粘贴后能精准还原它在原始文本里的位置。
3. 无感知体验：用户操作和看普通文本完全一样，不会有任何额外的学习成本。

如果不想用零宽字符，还有一种备选思路：把原始文本中每个单词的所有出现位置都存成数组（比如const wordOccurrences = []; originalWords.forEach((w,i) => wordOccurrences.push({word: w, index: i}))），然后用户粘贴文本后，把粘贴的单词序列和原始序列做匹配，找到每个单词对应的出现位置。不过这种方法遇到连续重复的单词时，匹配逻辑会复杂很多，不如零宽字符的方案直接可靠。

备注：内容来源于stack exchange，提问作者JulianJ