Question

So, I was messing around with this Dynamic Breadcrumbs write-up, and came across an issue where if the directory name has a space in it, then %20 gets added to the actual visible breadcrumb. Would this be removed using the decodeURI() function or is there a better way?

Here’s the js:

 var crumbsep = " • ";
 var precrumb = "<span class=\"crumb\">";
 var postcrumb = "</span>";
 var sectionsep = "/";
 var rootpath = "/"; // Use "/" for root of domain.
 var rootname = "Home";

 var ucfirst = 1; // if set to 1, makes "directory" default to "Directory"

 var objurl = new Object;

 // Grab the page's url and break it up into directory pieces
 var pageurl = (new String(document.location));
 var protocol = pageurl.substring(0, pageurl.indexOf("//") + 2);
 pageurl = pageurl.replace(protocol, ""); // remove protocol from pageurl
 var rooturl = pageurl.substring(0, pageurl.indexOf(rootpath) + rootpath.length); // find rooturl
 if (rooturl.charAt(rooturl.length - 1) == "/") //remove trailing slash
 { 
 rooturl = rooturl.substring(0, rooturl.length - 1); 
 }
 pageurl = pageurl.replace(rooturl, ""); // remove rooturl from pageurl
 if (pageurl.charAt(0) == '/') // remove beginning slash
 { 
 pageurl = pageurl.substring(1, pageurl.length); 
 }

 var page_ar = pageurl.split(sectionsep);
 var currenturl = protocol + rooturl;
 var allbread = precrumb + "<a href=\"" + currenturl + "\">" + rootname + "</a>" + postcrumb; // start with root

 for (i=0; i < page_ar.length-1; i++)
 { 
 var displayname = "";
   currenturl += "/" + page_ar[i];
   if (objurl[page_ar[i]])
   { 
   displayname = objurl[page_ar[i]]; 
   }
   else
   { 
   if (ucfirst == 1)
  { 
  displayname = page_ar[i].charAt(0).toUpperCase() + page_ar[i].substring(1); 
  }
  else
  { 
  displayname = page_ar[i];
  }
   }
   if ( i < page_ar.length -2 )
  { 
  allbread += precrumb + crumbsep +  "<a href=\"" + currenturl + "\">" + displayname + "</a>" + postcrumb; 
  }
   else
    { 
    allbread += crumbsep +  displayname; 
    }
 }
 document.write(allbread);

If decodeURI() was to be used, where exactly would it go? Also, more unrelated, would there be an option you could add to the code above that would make the actual page inside of the directory be included in the breadcrumbs as the last item instead of the last directory? Not real important but thought I would ask as well. Thanks for any input!

Answer 1

Yes, decodeURI will do the trick. You can add the line displayname = decodeURI(displayname); right before the if that reads if ( i < page_ar.length -2 ):

...
displayname = decodeURI(displayname);
if ( i < page_ar.length -2 )
...

Note that since displayname and currenturl end up being directly embedded in a raw HTML string, any special HTML characters should be escaped first, otherwise you’re open to some XSS attacks (imagine some malicious individual posting a link to your site like yoursite.com/valid/page/%3Cscript%3Ealert%28%22Oh%20no%2C%20not%20XSS%21%22%29%3C%2Fscript%3E). One of the simplest ways to do so is covered by this answer, though it requires jQuery.

If you want the current page included in the breadcrumbs, I believe it is sufficient to change the loop to go from 0 to page_ar.length instead of page_ar.length - 1:

...
for (i=0; i < page_ar.length; i++)
...