JavaScript如何基于单词索引提取字符串片段并将单词设为可点击

你已经持有所有单词的原始起止索引，完全不需要使用split拆分字符串，直接基于索引逐段切片拼接即可，100%保留原文本的所有字符、空格、标点，不会破坏原有文本流。

核心逻辑 #

按字符串从头到尾的顺序，把内容拆成「不可点击的非单词片段」和「可点击的纯单词片段」交替拼接：

• 用一个游标变量记录当前已经处理到的字符串位置，初始值为0
• 按出现顺序遍历每个单词的索引区间：
  • 先截取游标位置到当前单词起始索引之间的内容：这部分是单词前的空格、标点等非单词内容，作为普通不可点击文本
  • 再截取单词起始索引到结束索引之间的内容：这部分是纯单词本身，包裹可点击交互元素
  • 把游标更新到当前单词的结束索引位置
• 所有单词遍历完成后，截取最后一个单词结束位置到字符串末尾的剩余内容，补到最后作为普通文本

代码实现 #

// 原始文本字符串
const pageContent = "He stood up and asked the teacher, \"Can you elaborate the last point please? \". ";
// 你预先存储的单词索引列表，每个元素对应单词的起止下标、单词本身
const wordIndexes = [
  { start: 0, end: 2, word: "He" },
  { start: 3, end: 8, word: "stood" },
  { start: 9, end: 11, word: "up" },
  { start: 12, end: 15, word: "and" },
  { start: 16, end: 21, word: "asked" },
  { start: 22, end: 25, word: "the" },
  { start: 26, end: 33, word: "teacher" },
  { start: 35, end: 38, word: "Can" }, // 前导引号在索引34位置，不会被包含进可点击区域
  // 剩余单词的索引按实际存储补充即可
];

function buildRenderSegments(originStr, wordIndexList) {
  const segments = [];
  let cursor = 0;
  // 先按单词起始位置排序，避免索引顺序错乱导致内容拼接错误
  const sortedWords = [...wordIndexList].sort((prev, next) => prev.start - next.start);

  for (const wordItem of sortedWords) {
    const { start, end, word } = wordItem;
    // 异常索引拦截：跳过范围重叠、超出字符串长度的无效数据
    if (start < cursor || end > originStr.length) continue;

    // 拼接单词前的非可点击内容（标点、空格等）
    if (start > cursor) {
      segments.push({
        clickable: false,
        content: originStr.slice(cursor, start)
      });
    }

    // 拼接可点击的纯单词内容
    segments.push({
      clickable: true,
      content: originStr.slice(start, end),
      targetWord: word
    });

    cursor = end;
  }

  // 拼接末尾剩余的非可点击内容
  if (cursor < originStr.length) {
    segments.push({
      clickable: false,
      content: originStr.slice(cursor)
    });
  }

  return segments;
}

// 调用后拿到的segments直接遍历渲染即可
const renderList = buildRenderSegments(pageContent, wordIndexes);

注意事项 #

• 存储单词索引时要确保起止位置精准对齐单词本身的首尾，不要把前后的标点、空格包含进去。比如示例中Can前的双引号在索引34的位置，把Can的start设为35、end设为38，切出来的可点击内容就只有Can，前导引号会自动归入前一段不可点击的普通文本。
• 渲染时根据clickable字段区分渲染逻辑：不可点击片段直接渲染为普通文本，可点击片段渲染为绑定了跳转逻辑的行内元素即可，最终渲染出的文本和原始字符串完全一致，不会出现字符丢失、空格错乱的问题。
• 代码自带异常索引拦截逻辑，遇到索引重叠、越界的脏数据会自动跳过，不会打乱整体文本顺序。

内容的提问来源于stack exchange，提问作者Joseph Mutua