Handling case where null is returned Javascript

Question

I am trying to count the number of full stops in a sentence. This code works fine when there is a full stop in the sentence. However, if there isn't a full stop i get an error message saying Cannot read property 'length' of null

What is the best way to write my code to handle this error, and display 0 as number of fullstops to the user.

See js fiddle here for the example

JS

$(".calculate").click(function() {
var input = $(".text-input").val();
var fullStopCount = 0;
   fullStopCount = input.match(new RegExp("\\.", "g")).length;
   $(".fullstop-count").text(". = " + fullStopCount);

});

HTML

<div class="textarea-holder">
  <textarea class="text-input" name="textarea" rows="5" cols="30">This sentence contains one fullstop.</textarea>
</div>
<button class="calculate">Calculate</button>
<p class="fullstop-count"></p>

Use /\./g instead of new RegExp("\\.", "g"), it's more readable, and may be faster. — GingerPlusPlus
– GingerPlusPlus, Commented May 22, 2016 at 11:51

Omri Aharon · Accepted Answer · 2016-05-22 11:48:48Z

2

Just make another if (ternary in this example) to check you received results:

var fullStops = input.match(new RegExp("\\.", "g"));
var fullStopsCount = fullStops ? fullStops.length : 0;
$(".fullstop-count").text(". = " + fullStopCount);

answered May 22, 2016 at 11:48

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2016-05-22 12:08:06Z

1

As per documentation in case no match is found match() returns null, in that case you can't get length property of null.

Also you can use /\./g instead of new RegExp("\\.", "g") which will be much faster since it's already a regex object.

$(".calculate").click(function() {
  var input = $(".text-input").val();
  var fullStopCount = 0;
  // if match() returns null ( which is falsy value) returns [] 0therwise the matched array
  fullStopCount = (input.match(/\./g) || []).length;
  $(".fullstop-count").text(". = " + fullStopCount);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="textarea-holder">
  <textarea class="text-input" name="textarea" rows="5" cols="30">This sentence contains one fullstop.</textarea>
</div>
<button class="calculate">Calculate</button>
<p class="fullstop-count"></p>

FYI : More about short-circuit evaluation of logical operator is here.

edited May 22, 2016 at 12:08

answered May 22, 2016 at 11:50

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

1 Comment

Pranav C Balan Over a year ago

@phantom : glad to help :)

Jorge · Accepted Answer · 2016-05-22 11:51:56Z

0

Try to check if variable is null first to avoid the error

if (input.match(new RegExp("\\.", "g")) != null) {
  // check the length...
}

answered May 22, 2016 at 11:51

Jorge

1,18610 silver badges16 bronze badges

2 Comments

Omri Aharon Over a year ago

This requires another regexp extraction if you enter the if clause.

Jorge Over a year ago

Store the result of that expression in a variable first and then compare

dimlucas · Accepted Answer · 2016-05-22 11:53:10Z

If there are no '.' in the text, input.match(new RegExp("\\.", "g")) will return null. You should use .length only if there is at least one full stop otherwise you know there are none

$(".calculate").click(function() {
var input = $(".text-input").val();
var fullStopCount = 0;
   fullStopReg = input.match(new RegExp("\\.", "g"));
   if(fullStopReg == null){
       $(".fullstop-count").text(". = 0");
   }
   else{
      fullStopCount = fullStopReg.length;
   		$(".fullstop-count").text(". = " + fullStopCount);
   }
   

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
  <textarea class="text-input" name="textarea" rows="5" cols="30">This sentence contains one fullstop.</textarea>
</div>
<button class="calculate">Calculate</button>
<p class="fullstop-count"></p>

Collectives™ on Stack Overflow

Handling case where null is returned Javascript

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related