有没有办法从动态创建的面包屑中删除%20?

时间:2010-11-17 01:47:58

标签: javascript urlencode breadcrumbs urldecode percent-encoding

所以,我正在讨论这个Dynamic Breadcrumbs的写作,并遇到一个问题,如果目录名中有空格,那么%20会被添加到实际可见的痕迹中。是否可以使用 decodeURI()函数删除它,还是有更好的方法?

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

如果要使用 decodeURI(),它究竟会去哪里?另外,更加无关,是否有一个选项可以添加到上面的代码中,这将使目录中的实际页面作为最后一项而不是最后一个目录包含在面包屑中?不是很重要,但我想也会问。感谢您的任何意见!

2 个答案:

答案 0 :(得分:2)

是的,decodeURI可以解决问题。您可以在阅读displayname = decodeURI(displayname);的{​​{1}}之前添加第if行:

if ( i < page_ar.length -2 )

请注意,由于... displayname = decodeURI(displayname); if ( i < page_ar.length -2 ) ... displayname最终会直接嵌入到原始HTML字符串中,因此应首先转义任何特殊的HTML字符,否则您会对某些XSS attacks开放(想象一些恶意的个人发布你网站的链接,如yoursite.com/valid/page/%3Cscript%3Ealert%28%22Oh%20no%2C%20not%20XSS%21%22%29%3C%2Fscript%3E)。 this answer涵盖了最简单的方法之一,但它需要jQuery。

如果您想要包含在面包屑中的当前页面,我相信将循环更改为从0变为currenturl而不是page_ar.length就足够了:

page_ar.length - 1

答案 1 :(得分:1)

您应该使用decodeURIComponent(),而不是decodeURI()。有点难以看到你正在尝试做什么,但这里有一些更简单的代码,它将为你提供当前URI中的'目录'数组,解码:

var dirs = location.pathname.split('/');
for (var i=0,len=dirs.length;i<len;++i){
  dirs[i] = decodeURIComponent(dirs[i]);
}