Uncaught TypeError: Cannot read property '1' of null(…) in a JavaScript function

问题:

This method is part of a module; And despite the error...

Uncaught TypeError: Cannot read property '1' of null(…)

works to a small degree, however it appears to have blocked an additional method on the module.

This is a fiddle which contains the whole module.

searchURL: function() {   function insertAfter(newNode, referenceNode) {     referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);   }   var link, url, parser, newPathName = '',     newstr = '',     doc = document,     avon_rep_container = doc.getElementById('avon_rep_container'),     avon_rep_container_id,     avon_rep_container_links,     avon_rep_container_images,     documentTableWrapper,     docBodyFirstChild,     full_width_container_1 = doc.getElementsByClassName('full-width-container')[1],     full_width_img_class_el = doc.getElementsByClassName('full-width-img')[0];   if (!avon_rep_container) {     avon_rep_container = doc.createElement('div');     avon_rep_container.setAttribute('id', 'avon_rep_container');     avon_rep_container.className = 'container-avon-representative-news';     avon_rep_container_links = avon_rep_container.getElementsByTagName('a');     avon_rep_container_id = doc.getElementById('avon_rep_container');     docBodyFirstChild = doc.body.firstChild;     documentTableWrapper = doc.getElementsByClassName('marginfix')[0];     avon_rep_container.appendChild(documentTableWrapper);     doc.body.appendChild(avon_rep_container);     full_width_container_1.removeChild(full_width_container_1.getElementsByTagName('table')[0]);     full_width_img_class_el.removeAttribute('style');   } else {     avon_rep_container_links = doc.getElementById('avon_rep_container').getElementsByTagName('a');   }   avon_rep_container_images = avon_rep_container.getElementsByTagName('img');   for (var i = 0; i < avon_rep_container_images.length; i++) {     var images = avon_rep_container_images[i];     images.src = '/dam/avon-us/landing-pages/rep-news/' + images.src.split('/').pop();     if (avon_rep_container_images[i].width == "538") {       avon_rep_container_images[i].style.width = "538px";     }     if (avon_rep_container_images[i].width == "258") {       avon_rep_container_images[i].style.width = "258px";     }     avon_rep_container_images[i].style.width = 'inherit';     avon_rep_container_images[i].style.margin = 'auto';   }   //for (var i = 0, len = arguments.length; i < len; i++) { // Using a for loop to allow unlimited arguments to be passed in   //instead collect all necessary urls   url = getURL(arguments); //[i]); // We are calling the publicApi.getURL() method and passing the looped argument from above   for (var j = 0, jlen = avon_rep_container_links.length; j < jlen; j++) { // This loop goes over the whole documents links...     link = avon_rep_container_links[j];     var domain = link.href.match(/(https?:\/\/.+?)\//)[1];     if ((url.indexOf(domain) !== -1) && (!link.href.match(/\.(pdf)/gi))) { // //...and we are checking each argument passed in to see if it matches the object value stored in the getURL function e.g. like a switch statement..       parser = document.createElement('a'); //...if so we are essentially adding a blank tag to all the documents in the document       parser.href = link.href;       link.setAttribute('target', '_self');       newPathName = parser.pathname;       console.log(domain);       if (newPathName.search(/Executive|District|Division|National/) != -1) { // Added check for these strings for SMO page         newPathName = newPathName.split('/').pop();         newstr = newPathName;       } else {         newstr = newPathName;       }       link.href = newstr;     } else {       link.setAttribute('target', '_blank');     }   }   //} } 

Can one explain what the error means in context to my Module, can't seem to understand it.

Thanks any help will be appreciated!

Update

This is where the error is occurring:

var domain=link.href.match(/(https?:\/\/.+?)\//)[1]; 

回答1:

String#match returns either null (no match) or an array with the matches.

var domain = link.href.match(/(https?:\/\/.+?)\//)[1]; //                     ^^^^^ 

Workaround with check

var domain = link.href.match(/(https?:\/\/.+?)\//);  if (domain) {     // do something with domain[1] } 

回答2:

Per string.match():

Return value

An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.

The regular expression should match the string, as well as the protocol and domain like you have it (i.e. the grouping surrounded by parentheses (https?:\/\/.+?)). You can ensure that the return value is not null (so it should be an array) and that is has more that one element before attempting to access index 1 (since the 1st index should be 0) like this:

var matches = link.href.match(/(https?:\/\/.+?)\//); if (matches !== null && matches.length > 1) { 

So take a look at this example:

function match(link) {     var matches=link.href.match(/(https?:\/\/.+?)\//);     if (matches !== null && matches.length > 1) {         var protocolAndDomain = matches[1];           console.log('protocol and domain: ',protocolAndDomain );     }     else {           console.log('no matching protocol and domain');     } } var link = { href: 'stackoverflow.com'}; match(link); //should find no matches  var link2 = { href: 'https://domain.com/'}; match(link2); //should match https://domain.com

I use the term protocol and domain because the expression is looking for the protocol (i.e. https://) before the domain. For more information about the parts of the URL, refer to this MDN page.

文章来源: Uncaught TypeError: Cannot read property '1' of null(…) in a JavaScript function