JavaScript 获取url参数及解决中文乱码问题

1.获取url参数

方法一：

    // 获取url参数
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }

方法二：

    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return r[2];
      return null;
    }

直接调用函数并传递参数名即可

注意：前面方法尚未对中文进行处理，如果传递的值是中文，会产生乱码

2.解决中文乱码

方法一：encodeURI()、decodeURI()

方法二：escape()、unescape()

我们可以对中文单独加密，也可以对整个url加密

3.一个简单的例子

test1.html

<!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>test1</title>
</head>
<body>
  <div>
    <div>点击按钮将名字参数name="罗辑"，性别参数gender="男"传递到test2.html</div> 
    <div>name使用encodeURI加密，gender使用escape加密</div>
    <button onclick="jump()">跳转</button>
  </div>
  <script>
    let name = "罗辑"
    let gender = "男"
    function jump() {
      name = encodeURI(name)
      gender = escape(gender)
      let url = `file:///G:/workspace/test/test2.html?name=${name}&gender=${gender}`
      window.location.href = url
    }
  </script>
</body>
</html>

test2.html

<!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>test2</title>
</head>

<body>
  <div>
    <div>我是test2.html我接收到的数据</div>
    <div id="name"></div>
    <div id="gender"></div>
  </div>
  <script>
    window.onload = function () {
      let url = window.location.href
      document.getElementById('name').innerText = `name = ${getQueryVariable('name')}`
      document.getElementById('gender').innerText = `gender = ${getQueryString('gender')}`
    }

    // 获取url参数
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return decodeURI(pair[1]); // 解密方法
        }
      }
      return false;
    }

    // 获取url参数
    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]); // 解密方法
      return null;
    }
  </script>
</body>

</html>