一个非常全面的javascript URL解析函数和分段URL解析方法

一、URL解析函数


代码如下:

<script> 
/**
*@param {string} url 完整的URL地址
*@returns {object} 自定义的对象
*@description 用法示例：var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.file='index.html'

myURL.hash= 'top'

myURL.host= 'abc.com'

myURL.query= '?id=255&m=hello'

myURL.params= Object = { id: 255, m: hello }

myURL.path= '/dir/index.html'

myURL.segments= Array = ['dir', 'index.html']

myURL.port= '8080'

myURL.protocol= 'http'

myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

*/ 
function parseURL(url) { 
 var a =  document.createElement('a'); 
 a.href = url; 
 return { 
 source: url, 
 protocol: a.protocol.replace(':',''), 
 host: a.hostname, 
 port: a.port, 
 query: a.search, 
 params: (function(){ 
     var ret = {}, 
         seg = a.search.replace(/^\?/,'').split('&'), 
         len = seg.length, i = 0, s; 
     for (;i<len;i++) { 
         if (!seg[i]) { continue; } 
         s = seg[i].split('='); 
         ret[s[0]] = s[1]; 
     } 
     return ret; 
 })(), 
 file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1], 
 hash: a.hash.replace('#',''), 
 path: a.pathname.replace(/^([^\/])/,'/$1'), 
 relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1], 
 segments: a.pathname.replace(/^\//,'').split('/') 
 }; 
}

//var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top'); 
var myURL = parseURL('http://localhost:8080/test/mytest/toLogina.ction?m=123&pid=abc'); 
alert(myURL.path); 
alert(myURL.params.m); 
alert(myURL.params.pid); 
</script>

二、JS分段URL解析

URL : 统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成：scheme://host:port/path?query#fragment


代码如下:

scheme  = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径
query = 查询（可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用”&”符号隔开，每个参数的名和值用”=”符号隔开。）
fragment = 信息片断（字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)）

对于这样一个URL
http://www.jb51.net:80/seo/?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:www.jb51.net

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:”"

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

赞 (0)

相关推荐

  • JavaScript中的parse()方法使用简介

    Javascript Date.parse() 方法接受一个日期字符串,并返回自1970年1月1日午夜的毫秒数. 语法 Date.parse(datestring) 注:括号内的数据是可选的 下面是参数的详细信息: datestring : 一个字符串,表示日期 返回值: 自1970年1月1日午夜的毫秒数. 例子: <html> <head> <title>JavaScript parse Method</title> </head> <b

  • javascript parseUrl函数(来自国外的获取网址url参数)

    函数代码 复制代码 代码如下: function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, protocol: a.protocol.replace(':',''), host: a.hostname, port: a.port, query: a.search, params: (function(){ var ret = {}, seg = a.search

  • 浅谈javascript的url参数parse和build函数

    Parse: function getParam() { var param = new Object() var item = new Array(); if (location.search == "") { return param; }; var query = location.search.substring(1); var list = query.split('&'); for(var i = 0; i < list.length; i++) { item

  • 一个JavaScript函数把URL参数解析成Json对象

    问题:请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象. eg:var obj=parseQueryString(url); 创建对象的三种形式: 一: var Person=new Object(); Person.name="Sun"; Person.age=24; 二: var Person=new Object(); Person["name"]="Sun"; Person[&quo

  • 一个非常全面的javascript URL解析函数和分段URL解析方法

    一.URL解析函数 复制代码 代码如下: <script>  /** *@param {string} url 完整的URL地址 *@returns {object} 自定义的对象 *@description 用法示例:var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top'); myURL.file='index.html' myURL.hash= 'top' myURL.host= 'a

  • 超全面的JavaScript开发规范（推荐）

    超全面的JavaScript开发规范（推荐）

    这篇文章主要介绍的是关于JS的命名规范.注释规范以及框架开发的一些问题,首先来看看目录. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框架开发:介绍全局变量冲突.单全局变量以及命名空间 一.命名规范 驼峰式命名法介绍: 驼峰式命名法由小(大)写字母开始,后续每个单词首字母都大写. 按照第一个字母是否大写,分为: ① Pascal Case 大驼峰式命名法:首字母大写.eg:StudentInfo.User

  • 很全面的JavaScript常用功能汇总集合

    很全面的JavaScript常用功能汇总集合

    本文主要总结了JavaScript 常用功能总结,如一些常用的额JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式.  目录: 众所周知,JavaScript是动态的面向对象的编程语言,能够实现以下效果: 丰富Web 网页功能 丰富Web界面 实现本地或远程存储. 实现分布式网络应用的前端组件,并在后台进行数据存储管理. 使用JavaScript可以实现完整的分布式Web 应用.  一.JavaScript 中的数据类型 JavaScript 提供三种元数据类型,string,numb

  • 超全面的javascript中变量命名规则

    前言 变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你的JavaScript代码更上一个台阶,也更有利于团队的再次开发和阅读代码. 全名原则 变量名区分大小写,允许包含字母.数字.美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型 尽量避免使用没有意义的命

  • 比较全面的C 、Java、JavaScript中的正则表达式详解

    什么是正则表达式? 正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗 * 浩":那么"罗 * 浩"就是公式,也称作 模式(Pattern) ,这篇文章就是 要匹配的串( 或叫文本 text) .再如,你要检查输入的一个字符串是否是 126 邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开

  • 浅谈JavaScript中你可能不知道URL构造函数的属性

    URL URL 是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它, 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点 例如,这里是这篇博客文章的路径: https://www.vipbic.com/thread.html?id=101 通常您需要访问 URL 的特定属性.这些可能是主机名(例如 vipbic

  • 非常全面的IReport的使用教程

    非常全面的IReport的使用教程

    目录 简介 安装环境 版本 注意事项 百度云下载地址 基本操作 新建 页面布局 style样式 中文支持必备 比较常用的属性 基础控件 Break:分页符 Ellipse.Round Rectangle.Line.Rectangle:图形 Static Text:静态文本 Text Field:文本域 Image:图片 Barcode:条形码 连接数据库-使用table与subreport 导入驱动 创建连接 编辑sql语句 主查询 子查询(较难) 子模板subreport 简介 iReport

  • 超全面的SpringBoot面试题含答案

    1. 什么是 Spring Boot? Spring Boot 是 Spring 开源组织下的子项目,是 Spring 组件一站式解决方案,主要是简化了使用Spring 的难度,简省了繁重的配置,提供了各种启动器,使开发者能快速上手. 2. 为什么要用SpringBoot 快速开发,快速整合,配置简化.内嵌服务容器 3. SpringBoot与SpringCloud 区别 SpringBoot是快速开发的Spring框架,SpringCloud是完整的微服务框架,SpringCloud依赖于Sp

  • 巧方法 JavaScript获取超链接的绝对URL地址

    对于Web程序员来说,处理简单的URL格式也许会成为一场噩梦.试想一下,一个网址里有很多组成部分都会影响你对它的解析方法: ····是否以/字符开头 ····是否以//开头 ····是否以?号开头 ····是否以#号开头 -等等 当你想要这个地址的绝对地址时,如何判断处理和解析?它有可能是http协议的,还可能是https协议的.够头痛吧.幸运的是,我们有个简单的方法来确定它的绝对地址,就是创建一个A元素来辅助完成这个任务! JavaScript代码 这里我将使用一个返回函数的JavaScrip

  • 用Python写一个无界面的2048小游戏

    用Python写一个无界面的2048小游戏

    以前游戏2048火的时候,正好用其他的语言编写了一个,现在学习python,正好想起来,便决定用python写一个2048,由于没学过python里面的界面编程,所以写了一个极其简单的无界面2048.游戏2048的原理和实现都不难,正好可以拿来练手,要是不知道这游戏的话,可以去网上查一下,或者下载一个到手机来玩一下,我就不在说其原理.我知道不放图的话大家一点兴趣都没,下面首先放一张游戏成型图,然后我们在来讲如何一步步用最基础的知识来实现. 一.生成4*4的矩阵 游戏的第一步便是生成一个4*4的矩

随机推荐