Forum Moderators: open

Message Too Old, No Replies

Getting rid of %20

         

llmm123

11:51 am on Mar 29, 2007 (gmt 0)

10+ Year Member



Hi,

I have the following code which does my "breadcrumbs" for me.


function breadcrumbs(){
sURL = new String;
bits = new Object;
var x = 0;
var stop = 0;
var output = "<A HREF=\"/\">Home</A> &gt; ";

sURL = location.href;
sURL = sURL.slice(8,sURL.length);
chunkStart = sURL.indexOf("/");
sURL = sURL.slice(chunkStart+1,sURL.length)

while(!stop){
chunkStart = sURL.indexOf("/");
if (chunkStart!= -1){
bits[x] = sURL.slice(0,chunkStart)
sURL = sURL.slice(chunkStart+1,sURL.length);
}else{
stop = 1;
}
x++;
}

for(var i in bits){
output += "<A HREF=\"";

for(y=1;y<x-i;y++){
output += "../";
}
output += bits[i] + "/\">" + bits[i] + "</A> &gt; ";
}
document.write(output + document.title);
}

I have different folders for my webpages - ie "new products", "back order" etc etc

The breadcrumbs work fine and does what it should, but when it displays my folders it shows it as new%20procucts/back%20order/index.html.

This obviously does not look good and actually of no help to my clients when displayed like this.

Is there somehow in which I can change this to show "new products/back order/index.html" withou the %20.

Regards,
LL

phranque

12:12 pm on Mar 29, 2007 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



a blank is not an allowable character in urls and must therefore be encoded.

perhaps you could replace blanks in directory names with an allowable character such as "-" which will also suffice as a word boundary for search engines.

llmm123

2:46 pm on Mar 29, 2007 (gmt 0)

10+ Year Member



Hi phranque,

Thanks for the reply. I also thought of this, but dont really like it as the underscore or hyphen will still be very clear on my breadcrumbs. To be honest, I have never seen breadcrumbs on other sites that look like that, so there must be a way around it......... Unless they have more sophisticated "breadcrumb code" than I do, which is probably the case as mine is very basic - as you can see.

I dont mind the %20 in my actual URL, but I do not want %20 or underscore or hyphen to show in my breadcrumbs!

LL

Philosopher

3:03 pm on Mar 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I believe most breadcrumb scripts are not done in javascript, but are done server side through php,asp, etc. and often are integrated with the actual database being used.

That's why you won't see the %20 as they will grab the category, product name from the db field, which CAN contain spaces, use that for the text and then replace the text with something else when creating the actual link.

I would imagine there is a way to do something similar with javascript, by having one variable for the URL and one for the link text and substituting an actual space for the %20 in the link text variable (but I could be wrong...I suck at javascript).

llmm123

3:31 pm on Mar 29, 2007 (gmt 0)

10+ Year Member



Thanks - I suck at Javascript BIGTIME, so we're in the same boat!

rocknbil

7:22 pm on Mar 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



the underscore or hyphen will still be very clear on my breadcrumbs.

You *really* shouldn't be using spaces in any of your file names and URL's. Although modern servers are able to resolve the URL's, as mentioned any search engine out there will have to encode the spaces so even if you get it to display as file name.htm in your breadcrumbs, on a search engine it will display as file%20name.htm, which you will have no control over.

It is not the best solution, but remember links will have the underline (unless you've styled it otherwise) so the underscore will be insignificant in human interpretation - the other side of this coin is that it may be typed incorrectly if someone attempts to manually enter the URL/URI.

However there *is* a solution for you - but you'll have to work for it. :-)


for(y=1;y<x-i;y++){
output += "../";
}
var textonly = bits[i];
textonly.replace(/\%20/, " ");

output += bits[i] + "/\">" + textonly + "</a> &gt; ";

You store bits[i] in a new variable, use the new variable to replace the %20 with new spaces, then put the new variable in the visible portion of the link, allowing the link itself to maintain the encode characters. Untested, there's your work. :-)

g1smd

7:01 pm on Apr 6, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You should not be using Javascript to generate breadcrumbs. That process occurs locally in the browser. You want your breadcrumbs to be delivered directly in your HTML code as served by the webserver so that the search engine can see and follow theose links too. Search engines don't do Javascript.

g1smd

7:04 pm on Apr 6, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Avoid using spaces and/or underscores in any URL.

Google will not treat the separate words as being separate.

URLS with %20 in them%20are%20very%20hard%20to%20read.

For URLs with underscores, the underscore disappears in underlined links.

Use hyphens or dots instead. I prefer to use dots.