Title: JavaScript breadcrumbs for urls that DON'T use slashes between folders
Tags: javascript;html;css
Question: So I have a somewhat unusual issue. I have found lots of js code for breadcrumbs, and lots of help; however, the company I work for does NOT use slashes between folders and file names in the page urls. Instead, they are using a slash after the main website url and then underscores between the folder levels and file names... Honestly, I've never run across this before, and since I'm not as comfortable with js as I could be, I'm not sure how to handle the issue. If they used all slashes or all underscores, I might be less confused, but since it's a combination of the two -- well, here I am.

So, I found some clientside code I liked with some modification in a different question on here, which I think works out to something like this:

```$(document).on("pageshow", "#breadcrumb", function breadCrumb(){

document.getElementById('ID').innerHTML = '<span&gt;' + part[i] + '</span&gt;';

var here = location.href.split('/').slice(3);

var parts = [{ "text": 'Home', "link": '/' }];

for( var i = 0; i < here.length; i++ )
{
    var part = here[i];
    var text = part.toUpperCase();
    var link = '/' + here.slice( 0, i + 1 ).join('/');
    parts.push({ "text": text, "link": link });
}
});
```

Suggestions? Ideas? Help? I don't mind creating a separate js file and pulling from the server, but in general I've discovered that things tend to work better on the web pages (at least on this particular site) if I can include the code in the page.

Worse, I have no access to the header information other than through some fields that pop up in the browser editor. All I can do is insert content into a container within the body. Generally speaking this is working just fine, even when I need to add script code with css or javascript. I just wanted to mention it. ...And in case anyone needs to know, we're using OpenCMS through an external company for website management (a more terrible arrangement I never saw! and many of the functionalities that should work in this do not).

p.s. internal href values look like this: /know-how_Chicken-Care_poultry-breed-research-guide.html

Comment: http://www.companyname.com/know-how_Chicken-Care_poultry-breed-research-guide.html

Comment: /know-how_Chicken-Care_raising-chickens-tips-and-advice.html -- The folders themselves don't use index pages, so you can't simply delete the file name to get back to the parent level.

Comment: So, for example, the top level page is located at /know-how_Main_know-how-central.html

Comment: can you provide an example of the urls structure? you can change the domain name for privacy purposes

Comment: What's the url to access the prior category? For example is it ```/know-how_Chicken-Care/``` or ```/know-how_Chicken-Care.html``` ?


Here is another answer: Ok, how about this

```jQuery(document).ready(function() {
    var here = location.href.split('/').pop().split('_');
    var parts = [{ "text": 'Home', "link": '/' }];
    console.log(here);
    for( var i = 0; i < here.length; i++ )
    {
        var part = here[i];
        var text = part.toUpperCase();
        var link = '/' + here.slice( 0, i + 1 ).join('_');
        parts.push({ "text": text, "link": link });
    }
    console.log(parts);
    for(var j=0;j<parts.length;j++) {
        var item=parts[j];
        jQuery('#breadcrumb').append(' / <a href="'+item.link+'"&gt;'+item.text+'</a&gt;');
    }
});
```

I extract the query string (know-how_Chicken-Care_poultry-breed-research-guide.html) and split it using underscores. Then in the for loop I join the parts with an underscore.

The result is

```0: Object
    link: "/"
    text: "Home"
1: Object
    link: "/know-how"
    text: "KNOW-HOW"
2: Object
    link: "/know-how_Chicken-Care"
    text: "CHICKEN-CARE"
3: Object
    link: "/know-how_Chicken-Care_poultry-breed-research-guide.html"
    text: "POULTRY-BREED-RESEARCH-GUIDE.HTML"
```

Edit: see the first part of my answer, I included the insertion of the link elements to the #breadcrumbp container. Also, the pageshow event wasn't triggering, so I used the document ready instead.

Comment for this answer: Let me give this a shot and see what happens. THANK YOU! I'll be back a few to let you know how it worked.
Comment for this answer: my brain is trying to shut down with a migraine (which hopefully won't succeed). I am not comprehending what you said in the last comment.
Comment for this answer: fyi. Still working on it. I did this:
[code]
$(document).on("pageshow", "#breadcrumb", function breadCrumb(){

var here = location.href.split('/').pop().split('_');

var parts = [{ "text": 'Home', "link": '/' }];
console.log(here);
for( var i = 0; i < here.length; i++ )
{
    var part = here[i];
    var text = parts.toUpperCase();
    var link = '/' + here.slice( 0, i + 1 ).join('_');
    parts.push({ "text": text, "link": link });
};
document.getElementById('breadcrumbs').innerHTML = parts[i];
[code]
then added document.write(breadcrumb()); in the div below
Comment for this answer: Still no luck. Still invisible.
Comment for this answer: Well, it worked. Although there's a slash showing up in front of the Home link. I really appreciate your patience and time on this.
Comment for this answer: it's telling me that an upvote requires a 15 reputation. I haven't gotten there yet, I'm afraid. I am sorry.
Comment for this answer: you still need to iterate over the ```parts``` array to draw the breadcrump. Your question doesn't have that function yet.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:06/13/14', 'FavoriteCount': 1.0, 'PostTypeId': 1, 'Tags': '<javascript><html><css>', 'Title': "JavaScript breadcrumbs for urls that DON'T use slashes between folders", 'ViewCount': 785, 'id': 24208680, 'user_AboutMe': "<p>I've been a writer since I was 16. In the last dozen years, I moved into Web Programming and Development (BSIT, University of Phoenix 2010). I like to learn. I'm currently doing Digital Content on a website 40 hours a week, but it is primarily HTML, CSS, and a little JavaScript. I do dabble in PHP on my own website (not a lot), along with doing a number of other types of programming on my own time, which unfortunately isn't much these days.</p>\n", 'user_AccountId': 4529805.0, 'user_DisplayName': 'Cara Colleen Coble', 'user_Reputation': 11.0, 'user_Views': 10.0, 'user_id': 3680650.0}}