网页开发：如何从URL提取路径后缀并在页面加载时展示？

嗨，这个需求用纯前端的JavaScript就能轻松实现，完全不用后端参与，刚好适合你有基础网页开发知识的情况～下面给你两种简单易懂的实现方案：

方案一：直接提取域名后的完整路径部分（完全匹配你的需求） #

这个方法专门针对你说的场景：当用户访问http://www.mydomainname.com/abcdefghijklmnopqrstuvwxyz时，提取abcdefghijklmnopqrstuvwxyz并展示。步骤很简单：

1. 用浏览器提供的window.location.pathname获取域名后的路径，比如这里会得到/abcdefghijklmnopqrstuvwxyz
2. 用slice(1)去掉路径开头的斜杠，得到纯字符串内容
3. 通过DOM操作把内容插入到页面的指定位置

直接上完整代码，你可以复制保存成HTML文件放到服务器上：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>展示URL路径内容</title>
</head>
<body>
    <h2>提取到的URL路径内容：</h2>
    <!-- 用来展示内容的容器 -->
    <div id="pathDisplay" style="font-size: 20px; color: #2c3e50;"></div>

    <script>
        // 1. 获取路径并去掉开头的斜杠
        const extractedContent = window.location.pathname.slice(1);
        // 2. 找到页面上的展示容器
        const displayElement = document.getElementById('pathDisplay');
        // 3. 将内容插入容器中
        displayElement.textContent = extractedContent;
    </script>
</body>
</html>

这段代码的逻辑很清晰：当页面加载时，JavaScript会自动获取当前URL的路径部分，处理后插入到页面的pathDisplay容器里，用户打开页面就能看到那段字符串啦。

方案二：提取路径的最后一段（应对多层级路径场景） #

如果之后你的URL可能变成多层级，比如http://www.mydomainname.com/folder/subfolder/target，而你只想提取最后一段target，可以用这个方法：

// 把路径按斜杠分割成数组，过滤掉空字符串后取最后一个元素
const pathParts = window.location.pathname.split('/').filter(part => part !== '');
const lastPathPart = pathParts.pop();

// 同样插入到页面容器中
document.getElementById('pathDisplay').textContent = lastPathPart;

这个方法会自动忽略路径中的空值（比如开头的斜杠导致的空元素），精准拿到最后一段路径内容。

小提示： 这两个方案都是纯前端实现，不需要后端做任何配置，只要你的HTML文件能被正常访问就可以生效。如果是静态页面，直接上传到服务器对应目录就行啦。

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