[JavaScript]JavaScript实战编写URL地址参数解析器[实现思路]

最新推荐文章于 2023-10-19 21:06:36 发布

AI Thabo

最新推荐文章于 2023-10-19 21:06:36 发布

阅读量284

点赞数 2

分类专栏：基础三大件文章标签： javascript node.js 前端 es6 html5

本文链接：https://blog.csdn.net/m0_46470372/article/details/113925301

版权

基础三大件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript实战编写URL地址参数解析器

本工具类似NodeJs实现的一些Response对象解析功能，可以将URL地址参数解析成为对象或者JSON字符串进行保存或输出

一、功能展示

在这里插入图片描述

输入URL 按下第一个解析按钮调试台输出组合好的结果对象

在这里插入图片描述

输入URL 按下第二个JSON按钮结果区输出JSON字符串方便存储

二、实现思路

为了获取到用户输入的表单数据，以及输出结果，先行获取两个DOM对象，后续作用

let p = document.querySelector("#res");
let text = document.querySelector("#ta1");

http://api.abo.com:8090/public/api/offer?userId=10001&workComId=1408&candId=10000&workId=10004&editorId=10000

2. 假设上文是我们即将要解析的URL地址，那我们的第一步是什么？

将`?`左右的字符串切开，我们只需要后面的参数字符串

["http://api.abo.com:8090/public/api/offer",
"userId=10001&workComId=1408&candId=10000&workId=10004&editorId=10000"]

切开的结果如上，我们只需要这个数组的第二个，也就是1号元素

方法如下

function fun(){
	let arr = text.value.split("?");
	return arr[1];
}

本方法不会被按钮单独调用，所以我们直接将结果返回

3. 继续切割，以`&`符号为分隔符进行切割

得到的结果如下

4. 再以`=`为分隔符进行切割

在这里插入图片描述

这时候的结果，我们可以看到，每个数组元素的0号元素对应着`对象的键`，1号元素则是`键的值`

5. 接下来我们只有一步操作，那就是组合对象

使用for循环的方法将对象的键与值进行绑定

3 4 5方法如下

function fun1(){
            let arr1 = fun().split("&");
            
            let arr2 = [];
            for(let i =0;i<arr1.length;i++){
                arr2[i] = arr1[i].split("=")
            };
            
            let obj = {};
            for(let i =0;i<arr2.length;i++){
                obj[arr2[i][0]] = arr2[i][1];
            }
            console.log(obj);
            return obj;
}

截止到目前为止，我们已经能够实现了第一个按钮的操作，从控制台输出对象

在这里插入图片描述

6. 转换JSON字符串

function fun2(){
	let textobj = fun1();
	p.innerText = JSON.stringify(textobj);
}

在这里插入图片描述

截止到目前为止，我们已经能够实现了第二个按钮的操作，将JSON字符串输出到页面

关于具体代码以及布局，可以看全文代码补全

三、全文代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL参数切割器</title>
    <style>
        #app{height:600px; width:800px;margin:0 auto;}
        textarea{width:100%;padding:20px;}
        p{text-align: center;}
    </style>
</head>
<body>
    <div id="app">
        <textarea id="ta1" cols="30" rows="10"></textarea>
        <p>
            <button onclick="fun1()">解析(log)</button>
            <button onclick="fun2()">生成对象JSON字符串</button>
        </p>
        
        <p id="res">结果区</p>
    </div>
    <script>
        let p = document.querySelector("#res");
        let text = document.querySelector("#ta1");

        function fun(){
            let arr = text.value.split("?");
            return arr[1];
        }

        function fun1(){

            let arr1 = fun().split("&");
            let arr2 = [];

            for(let i =0;i<arr1.length;i++){
                arr2[i] = arr1[i].split("=")
            };


            let obj = {};
            for(let i =0;i<arr2.length;i++){
                obj[arr2[i][0]] = arr2[i][1];
            }

            console.log(obj);
            return obj;
        }

        function fun2(){
            let textobj = fun1();
            p.innerText = JSON.stringify(textobj);

        }

        
    </script>
</body>
</html>

`原创不易点赞支持谢谢各位`

AI Thabo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
[JavaScript]JavaScript实战编写URL地址参数解析器[实现思路]

JavaScript实战编写URL地址参数解析器本工具类似NodeJs实现的一些Response对象解析功能，可以将URL地址参数解析成为对象或者JSON字符串进行保存或输出一、功能展示输入URL 按下第一个解析按钮调试台输出组合好的结果对象输入URL 按下第二个JSON按钮结果区输出JSON字符串方便存储二、实现思路为了获取到用户输入的表单数据，以及输出结果，先行获取两个DOM对象，后续作用let p = document.querySelector("#res");le
复制链接

扫一扫