如何使用HTML、CSS、JavaScript获取页面URL前10个字符之后的部分

CSS不具备读取页面URL的能力，这个需求仅靠JavaScript就能实现，HTML只需要负责引入对应的JS代码即可。

固定截取前10个字符后的内容 #

如果你的需求就是严格取URL前10个字符之后的部分，可以直接用字符串切片方法实现：

// 获取页面完整URL
const fullUrl = window.location.href;
// 索引从0开始计数，slice(10)代表从第11位字符开始截取到URL末尾
const result = fullUrl.slice(10);
// 控制台打印结果
console.log(result);

针对你举的例子random.com/abc，运行上述代码后控制台会直接输出/abc。

更通用的域名后路径提取方案 #

实际场景中页面URL通常会带有http:///https://前缀，域名长度也不一定固定为10位，如果你的真实需求是提取域名之后的路径部分，更稳妥的方案是直接调用浏览器提供的原生属性：

// 仅获取域名后的路径部分（不含查询参数、哈希）
const path = window.location.pathname;
console.log(path);

// 如需同时保留查询参数和哈希值，用以下写法
const fullSuffix = window.location.pathname + window.location.search + window.location.hash;
console.log(fullSuffix);

比如URL为https://random.com/abc?id=1#top，上述代码会分别输出/abc和/abc?id=1#top。

内容的提问来源于stack exchange，提问作者Aidan Young