Question

需要帮助！我一直在寻找这个看似简单的任务的解决方案，但找不到一个确切的任务。无论如何，我正在尝试根据页面的URL向标记添加自定义#id。当URL如下所示时，我正在使用的脚本正常工作。

- http://localhost.com/index.html
- http://localhost.com/page1.html
- http://localhost.com/page2.html
-> on this level, <body> gets ids like #index, #page1, #page2, etc...

我的问题是，即使在查看这样的子页面时，如何将身体#id保持为＃page1或＃page2？

- http://localhost.com/page1/subpage1
- http://localhost.com/page2/subpage2

这是我正在使用的JS代码（在线找到）

$(document).ready(function() {
    var pathname = window.location.pathname; 
    var getLast = pathname.match(/.*\/(.*)$/)[1];
    var truePath = getLast.replace(".html",""); 
            if(truePath === "") { 
                    $("body").attr("id","index");
            }
            else { 
                    $("body").attr("id",truePath);
            }       
    });

提前致谢！

编辑：感谢所有回复！基本上我只想根据他们的身体#id在每个页面上放置自定义背景图像。＆GT;＆GT; js noob here。

http://localhost.com/page2/subpage2 - > my only problem is how to make the id as #page2 and not #subpage2 on this link.

Answer 1

使用javascript split函数可能会有所帮助。例如（未经测试，但总体思路）：

var url = window.location.href.replace(/http[s]?:\/\//, '').replace('.html', '');
var segments = url.split('/');

$('body').id = segments[0];

此外，您可能需要考虑使用类而不是ID。这样您就可以将每个细分作为一个类......

var url = window.location.href.replace(/http[s]?:\/\//, '').replace('.html', '');
var segments = url.split('/');

for (var i = 0; i < segments.length; i++) {
    $('body').addClass(segments[i]);
}

修改

很高兴它有效。如果您打算使用这个实际的笔记，请注意几个笔记：如果您有除.html之外的扩展名，将会在类名中获取。您可以通过将替换更改为正则表达式来解释此问题...

var url = window.location.href.replace(/http[s]?:\/\//, ''); // Trim extension url = url.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'');

如果网址上有任何查询字符串你也想过滤掉那些（这是一个正则表达式，我不是百分之百） ......

url = url.replace(/\?.+$/,'');

此外，在每个for循环“around”中使用$('body')会有点低效，因为这会导致jQuery必须重新找到body标签。一种更高效的方法，特别是如果子文件夹最终为2或3深，将找到它一次，然后将其“缓存”到一个变量，如此...

var $body = $('body'); for ( ... ) { $body.addClass( ... }

Answer 2

你的正则表达式只会选择网址的最后一部分。

var getLast = pathname.match（/。 /（。）$ /）[1];

你匹配任何东西（。*），然后是斜杠，后跟任何东西（这次，捕获这个值）然后拉出第一场比赛，这是唯一的比赛。

如果你真的想这样做（我怀疑，这似乎是一个坏主意）那么你可以使用window.location.pathname，因为那里已经有了完整路径。

编辑：你真的不应该需要这样做，因为页面的URL已经是唯一的标识符。我无法想到你需要为页面上的body元素设置唯一id属性的任何情况。在您处理该内容的任何时候（无论是来自客户端javascript还是来自刮刀），您都应该拥有唯一的标识符 - URL。

你究竟想做什么？

Answer 3

尝试以下方法。基本上，它将id设置为域后出现的任何文件夹或文件名，但不包含文件扩展名。

$(document).ready(function() {
    $("body").attr("id",window.location.pathname.split("/")[1].split(".")[0]);
}

Answer 4

您希望获得路径的第一部分而不是最后一部分：

var getFirst = pathname.match(/^\/([^\/]*)/)[1];

Answer 5

如果您的网页都有一个通用名称（例如“页面”），您可以修改您的脚本，包括更改匹配模式以包含该部分：

var getLast = pathname.match(/\/(page\d+)\//)[1];

上面会匹配“page”后跟多个数字（省略'html'结尾）。

根据网址添加正文#id

5 个答案: