script标签上方加HTML元素致JS读取syncData报错求助

核心原因 #

报错Cannot read properties of undefined (reading 'word')的本质是**counter变量累加后超出了syncData数组的长度**，导致syncData[counter]变成undefined，再读取.word属性自然触发错误。

你提到添加HTML元素才触发问题，这只是表象——实际上代码本身没有边界保护，当页面存在额外元素时，脚本执行的隐性条件（比如字符解析、内存占用的细微变化）让原本刚好能避开边界问题的循环，现在提前耗尽了syncData的条目，把隐藏的bug暴露了出来。移除部分中文文本后，transcript长度变短，循环提前结束，所以不会触发报错。

具体修复步骤 #

1. 给所有访问syncData[counter]的地方加边界判断 #

在任何要访问syncData[counter].word的代码前，先确保counter没有超出数组长度，避免访问undefined：

// 原代码
var word = syncData[counter].word;
// 修改后
var word = counter < syncData.length ? syncData[counter].word : '';

2. 给while循环加边界限制 #

在while循环的条件里加上counter < syncData.length，防止循环无限累加counter直到超出数组边界：

// 原while条件
while ((!isNaN(transcript[i]) ||[ "千", "万", "亿"].includes(transcript[i]) ||["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "百", "千", "万", "亿", "两"].includes(syncData[counter].word)) && transcript[i]!=word) {
// 修改后的while条件
while (counter < syncData.length && 
  ((!isNaN(transcript[i]) || ["千", "万", "亿"].includes(transcript[i]) || 
    ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "百", "千", "万", "亿", "两"].includes(word)) && transcript[i]!=word)) {

3. 修复if分支里的边界问题 #

在if条件里访问syncData[counter].word前加判断，同时在counter累加后再次检查边界：

if (counter < syncData.length && ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "百", "千", "万", "亿", "两"].includes(word) && 
    (!isNaN(transcript[i]) || ["千", "万", "亿"].includes(transcript[i]))) {
    sentence+=word;
    i++;
    counter++;
    // 累加后再次判断，避免访问undefined
    word = counter < syncData.length ? syncData[counter].word : '';
    console.log("2)"+transcript[i] + '' + word);
}

4. 检查文本匹配度 #

确保transcript的文本内容和syncData里的word条目一一对应，避免出现一方内容提前耗尽的情况——这是触发边界问题的根本诱因。

核心代码修改片段 #

(function(win, doc) {
  var transcript = "你的中文文本内容";
   var syncData = 
  [{
    "endTime": "1.200",
    "startTime": "0",
    "word": ""
  }, {"endTime": "1.300","startTime": "1.200","word": "a"}, {"endTime": "1.800","startTime": "1.300","word": "中"}... ];
  var syncData2 = [];
  var sentence = "";
  var startTime = "0";
  var endTime = "";
  var counter = 0;
for (let i = 0; i < transcript.length; i++) {
  // 先判断counter是否越界
  var word = counter < syncData.length ? syncData[counter].word : '';
  var punctuation = transcript[i + 1];
  // while循环加边界限制
  while (counter < syncData.length && 
    ((!isNaN(transcript[i]) || ["千", "万", "亿"].includes(transcript[i]) || 
      ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "百", "千", "万", "亿", "两"].includes(word)) && transcript[i]!=word)) {
    word = counter < syncData.length ? syncData[counter].word : '';
      // if条件加边界判断
      if (counter < syncData.length && ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "百", "千", "万", "亿", "两"].includes(word) && 
          (!isNaN(transcript[i]) || ["千", "万", "亿"].includes(transcript[i]))) {
          sentence+=word;
          i++;
          counter++;
          word = counter < syncData.length ? syncData[counter].word : '';
          console.log("2)"+transcript[i] + '' + word);
      }
      else if(!isNaN(transcript[i])||[ "千", "万", "亿"].includes(transcript[i])){
        i++;
      }  
      else{
        if (counter >= syncData.length) break; // 提前跳出，避免报错
        word = syncData[counter].word;
          sentence+=word;
          counter++;
         word = counter < syncData.length ? syncData[counter].word : '';
         punctuation = transcript[i + 1];
      }
  }
  // 后续代码省略
})(window, document);

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