面试题之获取URL指定参数

最新推荐文章于 2023-02-17 10:13:53 发布

会飞的咕咕鱼

最新推荐文章于 2023-02-17 10:13:53 发布

阅读量322

点赞数

分类专栏：面试解析及知识点拓展文章标签：获取URL指定参数

本文链接：https://blog.csdn.net/weixin_38659265/article/details/109311821

版权

面试解析及知识点拓展专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>String</title>
</head>

<body>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script>
         /**
         *   获取URL指定参数
         *   注意
         *       1.使用场景有两种:传URL,动态获取当前搜索参数(window.location.search)
         *       2.参数分隔符可自定义,可使用默认分隔符,约定多参数之间使用|拼接
         *      3.(^||username&)([^|]*)(||$)
         *           正则: 
         *               | 两项之间的一个选择
         *               ([^\|]*)匹配非|之后的一个或多个字符
         *      4.解码
         *   步骤
         *       1.获取?后字符串
         *           a: 传入url
         *               利用substring,获取?及后字符串
         *                   str.substring(start,stop) 获取字符串介于两个下标之间的字符 
         *                       包含start,不包含stop,stop可省略
         *          b: 未传入url,获取当前url参数window.location.search
         * 
         *       2.根据匹配规则获取对应值
         *           a.去掉?
         *               str.substr(start,length) 从start下标开始,抽取length个字符
         *                   start: 可为负数,从尾部开始算起,-1即表示从字符串最后一个字符...
         *                   length:可省略,省略即表示到结尾字符
         *           b.检索值
         *               str.match() 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
         *                   类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
         *                  I: regexp 没有标志 g,返回值类似exec()(https://blog.csdn.net/weixin_38659265/article/details/109307686中有exec()相关介绍)
         *                   II: regexp 有标志 g,进行全局检索,找到所有匹配子字符串
         *                       没找到:返回null
         *                       找到: 返回数组为所有匹配字符串的集合,没有 index 属性或 input 属性
         *                           console.log("1 plus 2 equal 3".match(/\d+/g)) // ["1", "2", "3"]
         *           c.解码
         *               decodeURIComponent()
         */
        let url = 'http://www.domain.com/product.html?c_1|p_2|q_3|s_4';
        console.log(getUrlParam('c', url)); //1
        console.log(getUrlParam('p', url)); //2
        console.log(getUrlParam('q', url)); //3
        console.log(getUrlParam('s', url)); //4

        // 获取URL地址参数 默认按‘_’分割
        // name:参数名   url:url地址   symbol:分割符
        function getUrlParam(name, url, symbol) {
            if (typeof(symbol) == "undefined") {
                symbol = "_";
            }
            var exp = "(^|\|)" + name + symbol + "([^\|]*)(\||$)";
            console.log(exp)
            var reg = new RegExp(exp, "i");
            if (!url || url == "") {
                url = window.location.search;
            } else {
                url = url.substring(url.indexOf("?"));
            }
            var r = url.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]);
            return null;
        }
    </script>
</body>

</html>

会飞的咕咕鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试题之获取URL指定参数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>S.
复制链接

扫一扫

专栏目录