什么是URL？

最新推荐文章于 2024-07-09 13:56:57 发布

叫我饼干

最新推荐文章于 2024-07-09 13:56:57 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： URL

本文链接：https://blog.youkuaiyun.com/weixin_42279712/article/details/88723975

本文介绍了URL的基础知识，包括URL的定义、组成以及如何从URL中获取参数。URL是统一资源定位器，由协议、主机地址、端口、路径、参数和片段组成。在获取URL参数时，可以通过解析URL中的查询字符串来获取指定或全部参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在刷前端题的时候看到一道题为“获取URL中的参数”，遂发现自己对URL格式并没有什么了解。

什么是URL？

URL就是我们通常所说的网址，英文全称为（Uniform Resource Locator，URL），中文叫统一资源定位器。

URL可以由字母组成，也可以是一个IP地址。

URL的组成

部分内容来源于wudipmd的博客

protocol 协议类型，我们通常访问万维网所用的协议为http，常用的协议类型有以下四种：

protocol	应用于
http	超文本传输协议，用于访问普通网页，不加密
https	安全超文本传输协议，加密
ftp	文件传输协议，通常用于文件的上传与下载
file	访问本机的文件

hostname 主机地址，可以是域名或IP地址
port 端口，http协议默认端口80，不写则默认为:80端口
path 网络资源在服务器中的指定路径
parameters 这是用于指定特殊参数的可选项
query 用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP。NET等技术制作的网页）传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。
fragment 用于指定网络资源中的片段

含有[ ]的元素为可选项

获取 url 中的参数

回到文初开头的前端题

获取 url 中的参数
1. 指定参数名称，返回该参数的值或者空字符串
2. 不指定参数名称，返回全部的参数对象或者 {}
3. 如果存在多个同名参数，则返回数组

输入
http://www.nowcoder.com?key=1&key=2&key=3&test=4#hehe
输出
[1, 2, 3]

有了上面的知识，显然我们要做的就是截取URL中“？”之后“#”之前的部分，然后读取“&”分割下，每一个“=”左边和右边的值，即参数名称和参数的值。

附代码：

function getUrlParam(sUrl, sKey) {
    var param = sUrl.split('#')[0].split('?')[1]; //split后为一个array，所以可以用0和1来代表所取的部分
    if(sKey){//指定参数名称时
        var strs = param.split('&');
        var arrs = new Array();//存在多个同名参数时返回数组
        for(var i=0; i<strs.length; i++){
            var tmp = strs[i].split('=');
            if(tmp[0] == sKey){
                arrs.push(tmp[1]);
            }
        }
        if(arrs.length == 1){//单个返回参数值
            return arrs[0];
        }else if(arrs.length == 0){//0个返回空字符串
            return "";
        }else{//两个及以上返回数组
            return arrs;
        }
    }else{//考虑不指定参数的情况
        if(param == undefined || param == ""){//自己做的时候没考虑到
            return{};
        }else{
            var strs = param.split('&');
            var objRe = new Object();
            for(var i=0; i<strs.length; i++){
                var tmp = strs[i].split('=');
                if(!(tmp[0] in objRe)){
                    objRe[tmp[0]]=[];
                }
                objRe[tmp[0]].push(tmp[1]);   
            }
            return objRe;
        }   
    }
}