正则匹配出现Uncaught TypeError: 无法读取null的属性'1'该如何解决？

报错原因 #

报错Uncaught TypeError: Cannot read properties of null (reading '1')是因为当输入的URL不匹配正则表达式时，String.match()方法会返回null，此时尝试访问null[1]就会触发该错误。

你的正则存在两个关键问题导致匹配失败：

• 仅支持http://协议，但示例URL用的是https://，直接导致匹配失败返回null
• 正则中(..\d+)的写法不够精准，虽然能匹配tt开头的ID，但可以更明确地针对IMDb的title格式优化

修复后的代码 #

JavaScript部分 #

function myFunction() {
  var inputString = document.getElementById("ur").value;
  // 修正正则：支持http/https，匹配title后的ID（tt+数字）
  var result = inputString.match(/https?:\/\/.*imdb\.com\/title\/(tt\d+)/i);
  if (result) {
    document.getElementById("demo").innerHTML = result[1];
  } else {
    document.getElementById("demo").innerHTML = "请输入有效的IMDb URL";
  }
}

HTML部分 #

<form onsubmit="return false">
  <p>Enter the URL:</p><input id="ur" type="text" name="url">
  <button type="submit" class="button secondary" id="myBtn" onclick="myFunction();" value="Load">Load</button>
</form>

<p id="demo"></p>

关键修改点 #

• 正则中添加s?支持https协议，用https?:\/\/匹配http或https开头的URL
• 简化路径匹配，直接用\/title\/匹配IMDb的标准title路径
• 添加if (result)的判断，避免null访问错误，同时给用户错误提示
• 明确匹配tt\d+，精准定位IMDb的title ID格式

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