如何在JavaScript/React中遍历JSON文件获取文本行的章节号、行号及长度

我来给你讲讲怎么实现这个需求哈～ 你的JSON结构是两层嵌套数组，外层对应章节，内层对应每一行文本，我们只需要通过两层遍历找到目标字符串，再计算对应的位置和长度就行。下面给你两种常用的实现方式：

方式一：传统for循环（直观易懂） #

这种方式逻辑清晰，新手也能快速理解，适合需要明确控制遍历过程的场景：

// 你的原始JSON数据
const textData = {
  text: [
    ["hello world line one chapter one", "hello world line two chapter one", "hello world line three chapter one"],
    ["hello world line one chapter two", "hello world line two chapter two", "hello world line three chapter two"],
    ["hello world line one chapter three", "hello world line two chapter three", "hello world line three chapter three"]
  ]
};

// 要查找的目标字符串
const targetStr = "hello world line three chapter two";

// 定义查找函数
function findStringPosition(data, target) {
  // 遍历外层数组（章节）
  for (let chapterIdx = 0; chapterIdx < data.text.length; chapterIdx++) {
    const currentChapter = data.text[chapterIdx];
    // 遍历当前章节的每一行
    for (let lineIdx = 0; lineIdx < currentChapter.length; lineIdx++) {
      const currentLine = currentChapter[lineIdx];
      // 严格匹配目标字符串
      if (currentLine === target) {
        // 章节号和行号要+1（因为数组索引从0开始），行长度直接取字符串length属性
        return `${chapterIdx + 1}, ${lineIdx + 1}, ${currentLine.length}`;
      }
    }
  }
  // 如果遍历完都没找到，返回提示
  return "未找到目标字符串";
}

// 调用函数查看结果
console.log(findStringPosition(textData, targetStr)); // 输出: 2, 3, 27

方式二：数组方法（函数式风格，更适配React） #

如果习惯React里的函数式写法，可以用find、forEach这类数组方法来实现，代码更简洁：

function findStringWithArrayMethods(data, target) {
  let isFound = false;
  // 遍历每个章节
  data.text.forEach((chapter, chapterIdx) => {
    if (isFound) return;
    // 在当前章节中查找匹配的行
    chapter.find((line, lineIdx) => {
      if (line === target) {
        console.log(`${chapterIdx + 1}, ${lineIdx + 1}, ${line.length}`);
        isFound = true;
        return true;
      }
      return false;
    });
  });
  // 没找到的话提示
  if (!isFound) console.log("未找到目标字符串");
}

// 调用测试
findStringWithArrayMethods(textData, targetStr); // 输出: 2, 3, 27

额外说明 #

• 如果需要模糊匹配（比如只匹配包含目标字符串的行），可以把currentLine === target改成currentLine.includes(target)，或者用正则表达式匹配；
• 如果你在React组件中使用，只需要把函数逻辑放到组件的方法或者自定义Hook里就行，比如在点击事件触发时执行查找逻辑。

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