JavaScript 获取 URL 参数及解决中文乱码的两种实用方法

核心方法与代码实现

要获取 URL 中的参数，通常有两种主流做法：一种是编写函数利用正则表达式精确匹配目标参数；另一种是编写通用函数将整个查询字符串解析为对象，便于批量访问。以下分别展示这两种方法的实现逻辑。

第1步：使用正则分析法提取单个参数

目的：快速、安全地获取 URL 中指定名称的参数值，无需处理其他参数。 入口：定义一个全局 JS 函数。 动作：构建正则表达式匹配 ?key=value& 或 &key=value& 的模式。

以下是具体的代码实现：

function getQueryString(name) {
    // 构建正则：匹配边界符(&或开头)、参数名、等号、值(非&字符)、结束符(&或结尾)
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    // 从 window.location.search 中提取匹配项
    var r = window.location.search.substr(1).match(reg);
    
    // 如果匹配成功，返回捕获组[2]（即值部分），否则返回 null
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

重要参数说明：

• window.location.search：获取 URL 中问号 ? 之后的部分，包含 ? 本身。
• substr(1)：去除开头的 ?。
• unescape()：将百分号编码的字符串还原为普通字符串。注意：在现代开发中，推荐使用 decodeURIComponent() 以更好地支持 UTF-8 字符集。

完成状态：调用 getQueryString("key") 即可直接得到该 key 对应的原始字符串值。

第2步：使用对象构造法批量解析参数

目的：一次性获取 URL 中的所有参数，并将它们存储在一个对象中，方便按索引或键值访问。 入口：定义 GetRequest 函数。 动作：截取 ? 后的字符串，按 & 分割成数组，再按 = 分割每个元素构建键值对。

function GetRequest() {
    var url = location.search; // 获取 url 中 "?" 符后的字串
    var theRequest = new Object(); // 创建空对象存储参数
    
    if (url.indexOf("?") != -1) { // 确保 URL 中存在参数
        var str = url.substr(1); // 去掉 '?'
        strs = str.split("&"); // 按 '&' 分割成键值对数组
        
        for(var i = 0; i < strs.length; i ++) {
            // 每个元素形如 "key=value"，再次 split("=") 分离键和值
            // 同样需注意解编码过程
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    
    return theRequest;
}

使用示例：

// 调用函数获取所有参数对象
var Request = new Object();
Request = GetRequest();

// 通过键名访问具体参数值
var param1 = Request['param1'];
var param2 = Request['param2'];
console.log(param1, param2); // 输出对应的参数值

解决中文乱码的关键：编码与解码

上述两种方法虽然能解析出参数的字符串形式，但如果参数中包含中文，且发送方没有进行正确的编码，或者接收方未做解码，就会出现乱码。解决这一问题的关键在于传参时编码和收参时解码的配合。

第3步：传参页的编码处理

在发起跳转或请求的页面（A 页面），构建 URL 时应使用 encodeURI() 对包含中文的值进行编码。这会将中文字符转换为 UTF-8 格式的十六进制编码。

function send() {
    var url = "test02.html";
    var userName = $("#userName").html(); // 假设这是获取到的中文用户名
    
    // 关键步骤：使用 encodeURI 对整个 URL 或仅对参数值进行编码
    // 推荐方式：单独编码值后拼接，或使用 encodeURIComponent
    var targetUrl = url + "?userName=" + encodeURIComponent(userName);
    
    window.open(targetUrl);
}

第4步：接收页的解码处理

在接收参数页面（B 页面），拿到 URL 字符串后，需使用对应的解码函数将编码还原为中文字符。decodeURIComponent() 是处理 encodeURIComponent 编码内容的最佳选择，比旧的 decodeURI 更安全且兼容性好。

<script>
    // 获取当前页面的完整 URL
    var urlinfo = window.location.href;
    
    // 拆分出 "?" 后的内容
    var queryString = urlinfo.split("?")[1];
    
    if(queryString) {
        // 继续拆分出 "=后面的参数值"
        var rawValue = queryString.split("=")[1];
        
        // 关键步骤：使用 decodeURIComponent 还原中文
        var userName = decodeURIComponent(rawValue);
        
        $("#userName").html(userName);
    }
</script>

总结与注意事项

• 正则法 vs 对象法：如果需要频繁获取少量几个固定参数，建议使用正则法，性能稍好且代码简洁；如果需要遍历或动态获取参数，对象法更为灵活。
• 解码函数选择：尽量避免使用 unescape，它已废弃且不支持 UTF-8。请统一使用 encodeURI/decodeURI（用于整个 URI 的简单编码）或 encodeURIComponent/decodeURIComponent（用于参数值的精确编码）。对于中文参数，强烈建议在后端或服务端进行标准的 URL Encoding，前端配合解码以确保万无一失。
• 特殊字符处理：如果参数值中包含特殊符号（如空格、#、& 等），务必使用 encodeURIComponent 进行编码，以免破坏 URL 结构。

以上就是关于 JavaScript 获取 URL 参数及解决中文乱码的详细操作方法，更多关于前端 URL 解析技巧的资料请关注本站其它相关文章！