企业官网建设流程全解析

10分钟快速上手purl.js：JavaScript URL解析库入门教程

【免费下载链接】purl[NO LONGER MAINTAINED] A JS utility for for parsing URLs and extracting information out of them.项目地址: https://gitcode.com/gh_mirrors/pu/purl

purl.js是一款轻量级的JavaScript URL解析库，能够帮助开发者轻松提取和处理URL中的各类信息。无论是解析协议、域名、路径，还是提取查询参数和片段标识符，purl.js都能提供简单直观的API，让URL处理变得高效而准确。

📦 快速安装：两种简单方式

1. npm安装（推荐）

npm install @allmarkedup/purl

2. 直接引入脚本

从项目中获取purl.js文件，通过<script>标签引入：

<script src="purl.js"></script>

🔍 核心功能解析

1. 基础URL信息提取

创建URL解析实例后，可通过attr()方法获取URL的基本组成部分：

const url = purl('http://example.com:8080/path/file.html?name=test#fragment'); // 获取协议（http） console.log(url.attr('protocol')); // 获取主机（example.com） console.log(url.attr('host')); // 获取端口（8080） console.log(url.attr('port')); // 获取路径（/path/file.html） console.log(url.attr('path'));

2. 查询参数处理

使用param()方法轻松提取URL中的查询参数：

const url = purl('http://example.com/search?query=javascript&page=2&sort=desc'); // 获取所有参数 console.log(url.param()); // { query: 'javascript', page: '2', sort: 'desc' } // 获取特定参数 console.log(url.param('query')); // 'javascript'

3. 路径片段解析

通过segment()方法将URL路径拆分为可操作的片段：

const url = purl('http://example.com/blog/posts/2023/06'); // 获取所有路径片段 console.log(url.segment()); // ['blog', 'posts', '2023', '06'] // 获取指定片段（支持负数索引） console.log(url.segment(2)); // '2023'（第2个片段） console.log(url.segment(-1)); // '06'（最后一个片段）

💡 实用示例：场景化应用

示例1：表单提交前的URL验证

function validateUrl(inputUrl) { const url = purl(inputUrl); if (url.attr('protocol') !== 'http' && url.attr('protocol') !== 'https') { alert('请输入有效的HTTP/HTTPS网址'); return false; } return true; }

示例2：从当前URL加载页面状态

// 从URL查询参数恢复页面设置 const currentUrl = purl(); const pageSize = currentUrl.param('pageSize') || 10; const sortBy = currentUrl.param('sortBy') || 'date'; // 应用设置 loadData({ pageSize, sortBy });

🧪 测试用例参考

项目的test/purl-tests.js文件包含了完整的功能测试，涵盖了：

• 协议、主机、端口等基础属性提取
• 查询参数和片段标识符解析
• 路径片段拆分与索引访问
• 严格模式与非严格模式对比

📝 注意事项

1. 兼容性：支持所有现代浏览器，无需额外依赖
2. 严格模式：解析相对路径时建议使用严格模式purl(url, true)
3. 参数类型：所有返回值均为字符串类型，需自行转换为数字或布尔值
4. 维护状态：项目已停止维护，但核心功能稳定可用

通过本教程，您已经掌握了purl.js的基本使用方法。这款轻量级工具虽然简单，却能在处理URL相关任务时极大提升开发效率，是前端开发者的实用小帮手。

【免费下载链接】purl[NO LONGER MAINTAINED] A JS utility for for parsing URLs and extracting information out of them.项目地址: https://gitcode.com/gh_mirrors/pu/purl