Question

我有以下html：

<div id="box2">
    <p> this is some text and here is DAY 3 cool right </p>
    <!-- In the previous line, change DAY to something else -->
</div>
<br>
<select id="field"></select>

如果正则表达式“匹配”操作找到匹配项，则以下javascript正确填充选择下拉列表。但是，如果我将“day”的值更改为“night”，则整个脚本会停止，它不会触发警告框。是否有一些缺失的步骤？

var TextToSearch = document.getElementById('box2').innerHTML;
var result = TextToSearch.match(/DAY.*?</gi);
var select = document.getElementById("field");
if(result.length)
{
    for(var i = 0; i < result.length; i++)
    {
        var option = document.createElement("option");
        option.value = i+1;
        option.innerHTML = result[i];
        select.add(option);
    }
}
alert("test");

这是一个小提琴：https://jsfiddle.net/uooeLk2c/1/

Answer 1

如果没有匹配，您可以使用 OR ||。如果找不到匹配项，则match()会返回null，然后当您在length上使用null时，会引发错误。

当没有匹配时，您可以使用||返回空数组。

var result = TextToSearch.match(/NIGHT.*?</gi) || [];

使用此功能，无论result的状态如何，都要确保array始终为match()。

Demo

＆＃13;

var TextToSearch = document.getElementById('box2').innerHTML;
var result = TextToSearch.match(/DAY.*?</gi) || [];
var select = document.getElementById("field");

if (result.length) {
  for (var i = 0; i < result.length; i++) {
    var option = document.createElement("option");
    option.value = i + 1;
    option.innerHTML = result[i];
    select.add(option);
  }
}
alert("No Error");

＆＃13;

<div id="box2">
  <p>this is some text and here is night 3 cool right</p>
  <!-- In the previous line, change DAY to something else -->
</div>
<br>
<select id="field"></select>

＆＃13;

Answer 2

Uncaught TypeError: Cannot read property 'length' of null

在尝试获取result属性之前，请务必检查.length的值。

如果没有匹配，

.match会返回null。

更改if(result.length)的{{1}}。

Answer 3

不需要检查长度。

检查变量是否存在：

if (result) {

Answer 4

我想这样的事情应该......

if (typeof result !== 'undefined' && result && result.length)
{
/* your code here*/
}

当“匹配”没有匹配时，如何避免破解javascript？

4 个答案: