JavaScript html Textarea无法读取null的属性'1'答案

【问题标题】：JavaScript html Textarea getting Cannot read property '1' of nullJavaScript html Textarea无法读取null的属性'1'
【发布时间】：2018-12-09 18:29:54
【问题描述】：

看到一个 youtube 视频说 Chrome 有开发工具并运行它以获得乐趣，但它检测到 RegEx.exec 匹配存在问题，但不确定原因。

尽管出现错误，但该函数在 IE 和 Chrome 中运行良好，正如预期的那样，但我不想在创建更多代码/页面之前超越自己，直到这个空错误得到纠正。

这是我第一次使用 javascript 创建在我的计算机上运行的我自己的自动化 web 工具，我在其中粘贴多行文本以通过 Regexp.exec 提取数据匹配，然后为我的呼叫中心工作执行连接。

来自 Chrome 开发者工具

Uncaught TypeError: Cannot read property '1' of null           ConcatenateNodeAddr.html:27 

Join_NE_TID @ ConcatenateNodeAddr.html.html:27

onpaste @ ConcatenateNodeAddr.html.html:8

line 27 = var NetworkElementTID = (NodeAddrMatch[1]+NodeAddrMatch[2]+NodeAddrMatch[3]);

现在很困惑为什么我的代码“有效”，因为我得到了正确的输出。我在 stackoverflow 中发现了类似的问题，但看起来这些示例 RegEx 没有匹配项，我一定遗漏了一些东西。

要使用我的网络工具，只需将“W WLBYTYPSH67 WMMM800D 0311.05B 113”复制到文本区域

尽管出现错误，我使用了 regex101 和 RegEx 组匹配良好。

Match1 = WLBYTYPSH67 Match2 = 0311 Match3 = 05B

function ClearForm() {
  document.getElementById("TL1Form").reset();
}

function Join_NE_TID() {

  //  ## Extract NODE and Address to create TID //
  var InputName_NodeAddr = document.getElementsByName('NodeAddr')[0].value;
  var NodeAddrRegexp = /[\s\S]*\s([A-Z]{6}[A-Z0-9]{5})[\s\S]*\s([A-Z0-9]{4,6})(?:\.)([A-Z0-9]{3,5})\s[\s\S]*/;
  var NodeAddrMatch = NodeAddrRegexp.exec(InputName_NodeAddr);
  var NetworkElementTID = (NodeAddrMatch[1] + NodeAddrMatch[2] + NodeAddrMatch[3]);
  alert(NodeAddrMatch[1]); // alert shows the match //
  // ## Output Section  Node and Address ##  //
  var InputName_NodeAddrTID = document.getElementsByName('NodeAddrTID')[0];
  InputName_NodeAddrTID.value = (NetworkElementTID);

}

<form id="TL1Form">

  <!–– // ##  Define User Input Section ## // ––>
  <br /><b> Copy/Paste data between into text area<br/> ( W WLBYTYPSH67 WMMM800D 0311.05B 113 )</b><br />
  <textarea name="NodeAddr" rows="3" cols="27" placeholder="W  WLBYTYPSH67 WMMM800D  0311.05B  113" oninput="Join_NE_TID();" onpaste="Join_NE_TID();" /></textarea><br />
  <input type="button" onclick="ClearForm()" value="Reset form"><br /><br />

  <!–– //  ### Define Output Fields for Concatenation ### //––>
  <b>TID:</b> <input type="text" name="NodeAddrTID" size="25" placeholder="WLBYTYPSHAT031105B" /> <br /> The output is correct WLBYTYPSH67031105B
</form>

【问题讨论】：

您在哪里/何时看到错误？
感谢您的快速依赖 @mplungjan 我只在 chrome 开发工具中看到它。由于代码似乎工作正常，我期待没有错误的结果。
代码从我发布的内容中重新排列。表单实际上位于 HTML 文件的顶部，在 html

标签： javascript html forms textarea regex-group

【解决方案1】：

我一直想知道“document.getElementsByName”是否是问题并更改为“document.getElementID”但没有任何变化。从我在 w3schools 上发现的情况来看，现在似乎 ID 方法是首选。

看起来脚本在粘贴文本时运行了两次，而第二次迭代导致 chrome dev-tool 检测到 null，这可以解释它为什么起作用，而我从未发现问题。

我已删除“onpaste”并保留“oninput”，这似乎阻止了 chrome Dev-Tool 中的错误。以为我需要一个用于粘贴，另一个用于键盘输入，我的错。

更正的代码是。

<textarea name="NodeAddr" rows="3" cols="27" placeholder="W  WLBYTYPSH67 WMMM800D  0311.05B  113" oninput="Join_NE_TID();" /></textarea><br/>

【讨论】：