如何实现基于索引区间的字符串插值与字符包裹函数？

核心逻辑 #

通过分段处理字符串的方式，按索引区间将字符串拆分为普通片段和需要包裹的片段，最后拼接成目标字符串：

• 先对索引区间按起始位置升序排序，避免区间乱序导致错误
• 用指针跟踪当前处理到的字符串位置，依次处理每个区间：
  • 先把当前指针到区间起始位置的普通字符串加入结果
  • 再把区间内的字符串用指定前后标签包裹后加入结果
  • 更新指针到区间结束位置
• 最后把指针到字符串末尾的剩余普通字符串加入结果

完整实现代码 #

const magic = (str, ranges, before='<bold>', after='</bold>') => {
  // 复制并排序区间，避免修改原数组，确保按起始索引升序排列
  const sortedRanges = [...ranges].sort((a, b) => a[0] - b[0]);
  const result = [];
  let currentPos = 0;

  for (const [start, end] of sortedRanges) {
    // 处理区间前的普通字符串
    if (currentPos < start) {
      result.push(str.slice(currentPos, start));
    }
    // 处理需要包裹的区间内字符串（slice是左闭右开，匹配区间[start, end)）
    if (start < str.length) {
      const wrappedStr = before + str.slice(start, Math.min(end, str.length)) + after;
      result.push(wrappedStr);
    }
    // 更新当前位置到区间结束处
    currentPos = Math.max(end, currentPos);
  }

  // 处理最后一段普通字符串
  if (currentPos < str.length) {
    result.push(str.slice(currentPos));
  }

  return result.join('');
};

// 测试示例
const ranges = [[2,5], [11, 14]];
const str = 'brave new world';
console.log(magic(str, ranges)); 
// 输出：br<bold>ave</bold> new w<bold>orl</bold>d

额外说明 #

• 区间排序：即使传入的ranges是乱序的（比如[[11,14], [2,5]]），也能正确处理
• 边界校验：避免区间超出字符串长度导致的错误（比如区间end大于字符串长度时，只截取到字符串末尾）
• 无副作用：通过[...ranges]复制原区间数组后再排序，不会修改外部传入的变量

内容的提问来源于stack exchange，提问作者Louis Grellet