對url引數進行解碼
阿新 • • 發佈：2021-12-10
很久沒使用原生js了，寫的一塌糊塗。但是能用。
<!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> * { padding: 0; margin: 0; } .container { display: flex; justify-content: center; flex-direction: column; /* align-items: center; */ width: 100%; height: 100vh; } .content { display: flex; align-items: center; } textarea { flex: 3; height: 30vh; width: 100%; } button { flex: 1; height: 30vh; } </style> </head> <body> <div class="container"> <div class="content"> <textarea id="textarea" placeholder="請輸入url" type="text"></textarea> <button onclick="handleClick()" id="jiema">解碼</button> </div> <div class="result"> <ul id="result"></ul> </div> </div> <script> const jiema = document.getElementById("jiema"); const textarea = document.getElementById("textarea"); const result = document.getElementById("result"); function splits(data, node) { if (!data) { alert("未解析到引數"); return false; } const value = data.split(node); return value; } const handleJiema = function (value) { let arr = []; let arr1 = value.split("?")[1]; let arr2 = splits(arr1, "&"); if (!arr2) { return; } for (const iterator of arr2) { arr.push(splits(iterator, "=")) let node = document.createElement('li') let textNode = document.createTextNode(splits(iterator, "=").join('---')) node.appendChild(textNode) result.appendChild(node) } }; const handleClick = function () { handleJiema(textarea.value); }; // jiema.click() </script> </body> </html>