js 格式化地址栏字符串成对象

前端表单中的数据提交给服务器后，是具有一定格式的，后台若要用到提交的数据，是需要进行一定的转换的

以提交至浏览器页面地址栏为例，将数据装换成对象

eg：http://www.baidu.com?name=jack&age=30&sex=0--------> {name:"jack",age:"30",sex:"0"}

步骤方法：

　　1、从？开始，利用String对象中的 split（）方法 .split（"?"）将该字符串分成两个字符串--> ["http://www.baidu.com","name=jack&age=30&sex=0"]

　　2、得到数组的第二个数据：.split("?")[1]-->"name=jack&age=30&sex=0",再利用方法split（），以&为分隔符，分成三段-->["name=jack","age=30","age=30"

　　3、再用循环将数组里的三个数据以“=”分隔成二维数组

　　4、循环遍历得到二维数组里的数据，创建一个空对象，将数据以键值对形式存入对象中，完成转换

　　具体实现代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>格式化地址栏字符串成对象</title>
    </head>
    <body>
        <script type="text/javascript">
            var str = "http://www.baidu.com?name=jack&age=30&sex=0";
            function fun(str){
//                方法1
//                var num = str.indexOf("?");
//                var str1 = str.slice(num+1);
//                var str2  = str1.split("&");
//                for (var i=0;i<str2.length;i++) {
//                    str2[i] = str2[i].split("=");
//                }
//                console.log(str2);
//                var obj = {};
//                for (var j = 0;j<str2.length;j++) {
//                    if (!isNaN(str2[j][1])) {
//                        str2[j][1] = Number(str2[j][1]);
//                    }
//                    obj[str2[j][0]]=str2[j][1];
//                }
//　　　　　　　　　　方法2：

                var str1 = str.split("?")[1];
                var str2 = str1.split("&");
                var obj = {}
                console.log(str2)
                for(var i = 0;i<str2.length;i++){
                    var a = str2[i].split("=");
                    console.log(a)
                    obj[a[0]] = a[1]
                }
                return obj
            }
            
            console.log(fun(str));
            //输出结果格式：（对象）
//            {
//                name : "jack",
//                age : 30,
//                sex : 0
//            }
            
        </script>
    </body>
</html>

结果：

posted on 2018-12-12 19:27 薇依阅读(537) 评论(0) 收藏举报