不在文件夹之间使用斜杠的 URL 的 JavaScript 面包屑

Question

所以我有一个有点不寻常的问题。我找到了很多用于面包屑的 js 代码，以及很多帮助；但是，我工作的公司不在页面 url 中的文件夹和文件名之间使用斜线。相反，他们在主要网站 url 之后使用斜杠，然后在文件夹级别和文件名之间使用下划线......老实说，我以前从未遇到过这个，因为我对 js 不太满意，我不确定如何处理这个问题。如果他们全部使用斜杠或全部下划线，我可能不会那么困惑，但由于它是两者的组合 - 好吧，我在这里。

因此，我在此处的另一个问题中找到了一些我喜欢的客户端代码并进行了一些修改，我认为这些代码可以解决以下问题:

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

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

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 });
}
});

建议？想法？帮助？我不介意创建一个单独的 js 文件并从服务器中提取，但总的来说，我发现如果我可以在页面中包含代码，那么网页上的事情往往会更好(至少在这个特定的网站上) .

更糟糕的是，除了通过浏览器编辑器中弹出的某些字段外，我无法访问 header 信息。我所能做的就是将内容插入正文中的容器中。一般来说，这工作得很好，即使我需要用 css 或 javascript 添加脚本代码。我只是想提一下。 ...如果有人需要知道，我们正在通过一家外部公司使用 OpenCMS 进行网站管理(这是我从未见过的更糟糕的安排!而且许多应该在其中工作的功能却没有)。

附注内部 href 值如下所示:/know-how_Chicken-Care_poultry-breed-research-guide.html

Answer 1

好的，这个怎么样

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+'">'+item.text+'</a>');
    }
});

我提取查询字符串 (know-how_Chicken-Care_poultry-breed-research-guide.html) 并使用下划线将其拆分。然后在 for 循环中，我用下划线连接各部分。

结果是

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"

编辑:请参阅我的回答的第一部分，我将链接元素插入到#breadcrumbp 容器中。另外，没有触发 pageshow 事件，所以我使用了 document ready。