微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

HTML URL地址解析

高洛峰
发布： 2016-11-03 13:38:49
原创
2125人浏览过

html url地址解析

通过JavaScript的location对象，可获取URL中的协议、主机名、端口、锚点、查询参数等信息。

示例

URL：http://www.akmsg.com/WebDemo/URLParsing.html#top?username=admin&pwd=123456

解析结果： 

立即学习“前端免费学习笔记（深入）”；

IP地址输入插件
IP地址输入插件

IP地址输入插件

IP地址输入插件 31
查看详情 IP地址输入插件

QQ图片20161103133612.png

代码

console.log(
    'location.hash     :' + location.hash     + '\r\n' +
    'location.host     :' + location.host     + '\r\n' +
    'location.hostname :' + location.hostname + '\r\n' +
    'location.href     :' + location.href     + '\r\n' +
    'location.pathname :' + location.pathname + '\r\n' +
    'location.port     :' + location.port     + '\r\n' +
    'location.protocol :' + location.protocol + '\r\n' +
    'location.hash     :' + location.hash     + '\r\n' +
    'location.search   :' + location.search   + '\r\n' +
    'location.origin   :' + location.origin
)
登录后复制

在线示例

地址：http://www.akmsg.com/WebDemo/URLParsing.html

相关标签：
javascript

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：结合Vue.js的前端压缩图片方案 下一篇：javascript原生一步步实现bind分析
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JS排序算法实现_快速排序优化方案 快速排序平均时间复杂度为O(nlogn)，通过三数取中和小数组插入排序可优化性能。
2025-11-14 22:29:02
304
前端JS怎样与Spring缓存机制配合_前端JS与Spring缓存机制配合使用方法 前端JavaScript通过规范请求与HTTP缓存头，配合Spring后端的@Cacheable、@CachePut等机制实现协同：1.使用一致GET请求触发缓存命中；2.更新时调用对应接口使后端刷新缓存；3.利用Cache-Control、ETag等响应头让浏览器自动管理缓存；4.需实时数据时添加时间戳或设no-cache绕过缓存，确保数据一致性。
2025-11-14 22:23:16
471
JS装饰器编程_Decorator应用指南 装饰器是一种函数，用于在不修改原始代码的情况下增强类、方法、属性或参数的行为。通过@符号应用于目标声明，运行时接收元信息并返回修改后的描述符或对象。类装饰器可修改类定义，如冻结实例或添加元数据；方法装饰器通过descriptor控制方法行为，实现只读、日志、性能监控等；属性和参数装饰器主要用于元数据标注，常用于依赖注入和参数标记，需配合ReflectMetadata使用。尽管JavaScript装饰器尚处Stage2，TypeScript和框架如Angular、NestJS已广泛支持，提供声明式
2025-11-14 22:23:02
970
JS元素定位怎么获取_JS DOM元素获取与位置尺寸计算方法 使用getBoundingClientRect()可获取元素相对于视口的位置和尺寸，结合offsetWidth、clientHeight等属性可精确控制布局，常用于滚动监听与弹窗定位。
2025-11-14 22:20:02
302
页面生命周期事件剖析_DOMContentLoaded与Load DOMContentLoaded在DOM解析完成后触发，不等待资源加载，适合操作DOM；Load在所有资源加载完毕后触发，适用于依赖完整资源的场景。
2025-11-14 22:19:33
921
JavaScript如何实现全选反选_JavaScript复选框全选反选功能代码实现方法 通过原生JavaScript可实现复选框全选、反选与状态同步：1.用checkAll控制所有item类复选框的选中状态；2.通过循环遍历将每个item的checked属性取反实现反选；3.监听每个子项的change事件，判断是否全部选中以同步“全选”状态。
2025-11-14 21:58:34
466
对象合并与拷贝方法_浅拷贝与深拷贝实现 答案是浅拷贝仅复制对象第一层属性，深拷贝递归复制所有层级。常用浅拷贝方法有Object.assign()和扩展运算符；深拷贝可使用JSON.parse(JSON.stringify())或递归实现，以避免引用共享导致的数据污染。
2025-11-14 21:55:02
345
JS注解怎么标注Promise对象_ JS Promise类型参数的注解方法 使用JSDoc标注Promise类型可提升JavaScript代码的可读性和维护性。1.用@returns{Promise}明确函数返回值类型，如{Promise}，使编辑器能推断异步结果结构；2.用@param{Promise}注解参数类型，如接收字符串数组Promise的函数，明确要求传入resolve为string[]的Promise；3.支持多种泛型形式，包括Promise、Promise、Promise和Promise
2025-11-14 21:54:06
145
js迭代器模式是什么 迭代器是符合迭代器协议的对象，拥有next方法，返回包含value和done属性的对象，用于顺序访问集合元素而不暴露内部结构。
2025-11-14 21:51:30
341
JS闭包应用场景_JavaScript高级技巧剖析 闭包能访问词法作用域变量并实现数据私有化、事件回调、函数柯里化和防抖节流。1.通过IIFE封装私有变量；2.在循环中用闭包绑定正确索引值；3.柯里化利用闭包保存参数；4.防抖函数依赖闭包维持定时器状态，提升性能。
2025-11-14 21:49:51
377
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部