JS 获取 URL 地址/参数

操作js 的时候经常要对Http请求进行操作,不像JSP 能够直接拿到值,所以就要依赖JS 来获取相应的地址请求了,

本文介绍怎么用js 获取当前页面的URL 地址相关信息, 还有一个就是获取当前地址栏的指定参数信息(转载的作者提供了好几个方法,但是我只总结一个,而且我推荐使用这种, 通用性比较高);

我也是转载别人的,废话不多说,晾代码

#代码部分

<html>
<head>
    <title>JS 获取 URL 参数</title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
    <h1 class="show" style="color:red"></h1>
    <select name="select" id="select">
        <option value="">请选择</option>
        <option value="0">获取URL</option>
        <option value="1">获取URL的协议</option>
        <option value="2">获取URL的主机</option>
        <option value="3">获取URL的端口号</option>
        <option value="4">获取URL的路径部分</option>
        <option value="5">获取URL“#”后面的分段</option>
        <option value="6">获取URL的参数部分</option>
    </select>
    <br/>
    <input type="text" placeholder="输入需要获取的参数" onchange="changeEvent(this)">
</div>
</body>
<script>

    /**
     * 监听select的变化
     */
    $("#select").change(function () {
        var result = '';
        var select = $("#select").val();
        switch (parseInt(select)) {
            //1、window.location.href(设置或获取整个 URL 为字符串)
            case 0:result = window.location.href;break;
            //2、window.location.protocol(设置或获取 URL 的协议部分)
            case 1:result = window.location.protocol;break;
            //3、window.location.host(设置或获取 URL 的主机部分)
            case 2:result = window.location.host;break;
            //4、window.location.port(设置或获取与 URL 关联的端口号码)
            case 3:result = window.location.port;break;
            //5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)
            case 4:result = window.location.pathname;break;
            //6、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)
            case 5:result = window.location.hash;break;
            //7、window.location.search(设置或获取 href 属性中跟在问号后面的部分)
            case 6:result = window.location.search;break;
            default:break;
        }
        $(".show").text(result);
    });

    /**
     * input的 change 响应方法
     */
    function changeEvent(input) {
        var param = getUrlParam(input.value, null);
        $(".show").text(param);
    }

    /**
     * 获取URL地址参数
     * @param name 参数名称
     * @param url url
     * @returns {*}
     */
    function getUrlParam(param, url) {
        var reg = new RegExp("(^|&)" + param + "=([^&]*)(&|$)", "i");
        //如果不传url 就取当前页面的url
        if (!url || url == "") {
            url = window.location.search;
        } else {
            url = url.substring(url.indexOf("?"));
        }
        var result = url.substr(1).match(reg);

        if (result != null) {
            return unescape(result[2]);
        }
        return null;
    }
</script>
</html>

# 获取URL效果图点我查看

#获取url 参数效果图

#尾巴

看别的的代码也是对自己的成长,之前也是模模糊糊 ,现在算是比较清楚明白了

本文非原创转载自js如何准确获取当前页面url网址信息

JS 获取 URL 地址/参数

猜你喜欢