如何用JavaScript获取浏览器URL并拆分以展示表单用户输入？

嘿，我来一步步给你拆解这个问题，完全用纯JavaScript，不搞复杂函数，让你能看明白每一步的逻辑～

首先得先搞定表单页面的设置：只有当表单用GET方法提交时，用户的输入才会被拼在跳转后的URL里（这就是老师说的“通过结果页面的URL获取输入数据”的前提）。给你一个简单的表单页面示例：

<!-- form.html 表单页面 -->
<form action="result.html" method="get">
  <label>姓名：<input type="text" name="username"></label><br>
  <label>邮箱：<input type="email" name="email"></label><br>
  <label>年龄：<input type="number" name="age"></label><br>
  <button type="submit">提交</button>
</form>

接下来是结果页面（result.html）的JavaScript逻辑，我会把每一步都写得清清楚楚，没有封装函数，方便你理解：

<!-- result.html 结果展示页面 -->
<!DOCTYPE html>
<html>
<body>
  <h2>你的输入内容：</h2>
  <div id="output"></div>

  <script>
    // 1. 直接获取URL中?后面的查询参数部分（比拿整个href更高效）
    let queryString = window.location.search;
    console.log("原始查询字符串：", queryString); // 示例：?username=张三&email=zhangsan@test.com&age=25

    // 2. 去掉开头的问号，得到纯键值对组成的字符串
    let paramsStr = queryString.slice(1);
    console.log("去掉问号后的字符串：", paramsStr); // 示例：username=张三&email=zhangsan@test.com&age=25

    // 3. 用&作为分隔符，把字符串拆成一个个键值对的数组
    let paramPairs = paramsStr.split('&');
    console.log("拆分后的键值对数组：", paramPairs); // 示例：["username=张三", "email=zhangsan@test.com", "age=25"]

    // 4. 获取页面上用来展示结果的容器
    let outputDiv = document.getElementById('output');

    // 5. 遍历每个键值对，拆分并展示到页面上
    for (let i = 0; i < paramPairs.length; i++) {
      // 把单个键值对用=拆分，得到键（输入框的name）和值（用户输入的内容）
      let keyValue = paramPairs[i].split('=');
      let inputName = keyValue[0];
      // 注意：URL里的中文/特殊字符会被编码，必须用decodeURIComponent解码才能正常显示
      let inputValue = decodeURIComponent(keyValue[1]);

      // 创建一个p标签来展示每组输入，然后添加到容器里
      let resultItem = document.createElement('p');
      resultItem.textContent = `${inputName}：${inputValue}`;
      outputDiv.appendChild(resultItem);
    }
  </script>
</body>
</html>

几个关键细节要注意： #

• window.location.search：专门用来获取URL中?开始的查询参数部分，比手动截取整个URL更靠谱。
• decodeURIComponent()：因为浏览器会自动把URL里的特殊字符（比如中文、空格）编码成%xx格式，必须解码才能显示正常的内容。
• 表单里的name属性很重要：每个输入框的name会作为URL里键值对的“键”，没有name的输入框数据不会被传到URL里。

这样你提交表单后，result页面就会自动把用户输入的内容展示出来啦～

内容的提问来源于stack exchange，提问作者Sam Porter