How to remove this JavaScript null error?

Question

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 === 'complete') {
    $('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.com/

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?

atmd · Accepted Answer · 2015-02-27 09:36:54Z

6

You could add a conditional check. i.e.

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

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

answered Feb 27, 2015 at 9:36

atmd

7,5003 gold badges35 silver badges64 bronze badges

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

5 Comments

David Snabel Over a year ago

Well this is not the most efficient way to do it. You are now doing the regular expression twice. Well you can do it just once.

atmd Over a year ago

True, however the browser will cache the result, so its not quite the same as doing two separate regex tests. I guess in reality you'd need to know if the results should fail more frequently then it passes

David Snabel Over a year ago

Does it cache it? Do you have any prove for that?

atmd Over a year ago

The browser caches collections in the background. It's something I leaned from SO a while ago. I'll dig it out (modern browsers that is)

atmd Over a year ago

So I was slightly mistaken, the caching is the browsers selector engine, not necessarily the calculations, however this jspef does seem to show that doing the same regex again is faster the second time round, so maybe a similar function is being used.

Alex Char · Accepted Answer · 2015-02-27 09:48:00Z

4

You can check if the value is null:

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

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

fiddle

edited Feb 27, 2015 at 9:48

answered Feb 27, 2015 at 9:39

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

Comments

David Snabel · Accepted Answer · 2015-02-27 09:38:17Z

3

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 === 'complete') {
    $('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.

answered Feb 27, 2015 at 9:38

David Snabel

10.1k7 gold badges24 silver badges29 bronze badges

Comments

Jason van der Zeeuw · Accepted Answer · 2015-02-27 09:37:11Z

2

you could check if there is something found like this:

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

answered Feb 27, 2015 at 9:37

Jason van der Zeeuw

9231 gold badge12 silver badges29 bronze badges

Comments

kdelmonte · Accepted Answer · 2015-02-27 09:44:19Z

2

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 === 'complete') {
        $('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.

answered Feb 27, 2015 at 9:44

kdelmonte

6801 gold badge10 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to remove this JavaScript null error?

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related