CODEWITHSUNDEEP
javascript
user6002037
user6002037

Reputation:

Handling case where null is returned Javascript

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>

Upvotes: 2

Views: 79

Answers (4)

Pranav C Balan
Pranav C Balan

Reputation: 115222

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.

Upvotes: 1

dimlucas
dimlucas

Reputation: 5131

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>

Upvotes: 0

Jorge
Jorge

Reputation: 1176

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

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

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

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);

Upvotes: 2

Related Questions