I'm using the following to create an if statement based on the last word of the url after the slash:

  // Sticky

  var match = location.search.match(/(\w+)$/)[0];

  if (match === 'plete') {
    $('p:has(audio)').addClass('sticky-child');
    $('p:has(audio)').appendTo('.lesson_lang_switch');
  }

The problem is, the front page doesn't have any word at the end of the URL (After the slash):

www.example/

So I get this error:

Uncaught TypeError: Cannot read property '0' of null 

How can I do it so that the error doesn't appear?

I'm using the following to create an if statement based on the last word of the url after the slash:

  // Sticky

  var match = location.search.match(/(\w+)$/)[0];

  if (match === 'plete') {
    $('p:has(audio)').addClass('sticky-child');
    $('p:has(audio)').appendTo('.lesson_lang_switch');
  }

The problem is, the front page doesn't have any word at the end of the URL (After the slash):

www.example./

So I get this error:

Uncaught TypeError: Cannot read property '0' of null 

How can I do it so that the error doesn't appear?

• javascript

Share Improve this question Follow asked Feb 27, 2015 at 9:33 wycwyc 55.4k8282 gold badges256256 silver badges440440 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

You could add a conditional check. i.e.

var match = (location.search.match(/(\w+)$/)) 
    ? location.search.match(/(\w+)$/)[0] 
    : "";

 if (match === 'plete') { // match will be "" if the above is false
    $('p:has(audio)').addClass('sticky-child');
    $('p:has(audio)').appendTo('.lesson_lang_switch');
 }

You can check if the value is null:

 // Sticky
 var loc = "www.example./";
 var match = loc.match(/(\w+)$/) === null ? "" : loc.match(/(\w+)$/)[0];

 if (match === 'plete') {
     $('p:has(audio)').addClass('sticky-child');
     $('p:has(audio)').appendTo('.lesson_lang_switch');
 }

fiddle

You have to check if the search actually exists. You might want to do something like this:

var match = location.search ? location.search.match(/(\w+)$/)[0] : undefined;

if (match === 'plete') {
    $('p:has(audio)').addClass('sticky-child');
    $('p:has(audio)').appendTo('.lesson_lang_switch');
}

location.search ? will return true if there is a value inside location.search if it does then the regular expression will be done. Else it will get the value undefined.

The reason you got this error is because location.search did not had any value. The regular expression returns null. And because you are trying to read [0] from null you will get this error.

you could check if there is something found like this:

var match = location.search.match(/(\w+)$/);
  if(match != null){
    match = match[0];
    if (match === 'plete') {
      $('p:has(audio)').addClass('sticky-child');
      $('p:has(audio)').appendTo('.lesson_lang_switch');
    }
  }

string.match returns an Array containing the matched results or null if there were no matches. With this being said, I suggest that you check to see what location.search.match returns before attempting to apply and index to it.

Example:

var matches = location.search.match(/(\w+)$/);

if(matches){
    var match = matches[0];
    if (match === 'plete') {
        $('p:has(audio)').addClass('sticky-child');
        $('p:has(audio)').appendTo('.lesson_lang_switch');
    }
}

Please see here if you want to learn more about JavaScript's string.match method.