Uncaught TypeError报错排查：无法读取undefined的replace属性

咱们直接揪出报错的核心：你调用getParameterByName(topicId)的时候，这个topicId变量还没被定义，它的值是undefined。当函数内部执行topicId = topicId.replace(/[\[\]]/g, "\\$&")时，自然就会抛出Cannot read property 'replace' of undefined的错误——毕竟undefined压根没有replace方法嘛。

具体问题拆解 #

你这段代码的逻辑明显有问题：

$(document).ready(function(){ 
  var topicId = getParameterByName(topicId); // 这里的topicId是未定义的！
  // ... 后续代码
});

你想获取URL里名为topicId的查询参数，但调用函数时，你传的参数是一个还没初始化的变量topicId，这完全不对。getParameterByName函数的第一个参数应该是你要获取的查询参数的名称字符串，也就是'topicId'，而不是一个未定义的变量。

修正后的代码 #

把调用函数的地方改成传字符串'topicId'，同时给你加了一些实用的优化：

function getParameterByName(paramName, url) { 
  if (!url) url = window.location.href; 
  paramName = paramName.replace(/[\[\]]/g, "\\$&"); 
  var regex = new RegExp("[?&]" + paramName + "(=([^&#]*)|&|#|$)"), 
      results = regex.exec(url); 
  if (!results) return null; 
  if (!results[2]) return ''; 
  return decodeURIComponent(results[2].replace(/\+/g, " ")); 
}

$(document).ready(function(){ 
  // 传参数名称字符串'topicId'，变量名可以保留topicId
  var topicId = getParameterByName('topicId'); 
  
  if (topicId) { // 加个判断，避免获取不到topicId时发送无效请求
    $.ajax({ 
      url: 'https://app.cloop.io/swish/rest/topic/' + topicId + '/basicInfo', 
      type: 'GET', 
      dataType: 'json', 
      contentType: 'application/json' 
    }).done(function (data) { // 可以接收接口返回的data，用实际的结束时间替换topicId
      // 这里建议用接口返回的结束时间字段，比如data.endTime，记得根据实际接口结构调整
      $("ol").prepend("<li>Contest ends on "+ topicId + "</li>"); 
    }).fail(function() { 
      console.log('获取主题信息失败');
    });
  } else {
    console.log('URL中未找到topicId参数');
  }
});

额外小建议 #

1. 调用接口前判断topicId是否存在，能避免很多无意义的错误请求；
2. 你现在在done回调里用topicId显示结束时间，应该是临时测试用的吧？实际开发里肯定要用到接口返回的真实结束时间，比如data.endTime，记得根据接口返回的JSON结构调整。

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