从含特殊字符的URL提取参数并展示到HTML页面的技术问题

嘿，我来帮你搞定这个URL参数提取和展示的问题！先梳理下你遇到的核心痛点：从带空格、特殊字符的URL里准确提取参数，还要用jQuery把它们展示在页面上对吧？

首先，先说说你现有代码里的几个小问题：

• 你用了split('&&')来分割参数，但实际URL里的参数分隔符是单个&（页面里的&是HTML转义，解析后就是&），这会导致参数分割完全错误。
• 没处理参数值里的空格和未转义的特殊字符（比如ghi=father & son里的空格和&），直接提取会出问题。
• 缺少URL解码步骤，Excel导出的参数里可能有未编码的空格，或者浏览器自动转成的%20，不解码的话显示会不对。

修复后的健壮参数提取函数 #

给你一个能处理这些情况的jQuery兼容函数：

function getURLParameter(sParam) {
    // 先解码整个查询字符串，处理空格、特殊字符的转义
    const queryString = decodeURIComponent(window.location.search.substring(1));
    // 用正则分割参数，兼容单个/多个&的情况
    const paramPairs = queryString.split(/&+/);
    
    for (const pair of paramPairs) {
        const [paramName, paramValue] = pair.split('=');
        // 匹配目标参数名，处理参数值为空的情况
        if (paramName === sParam) {
            return paramValue === undefined ? '' : paramValue;
        }
    }
    // 找不到参数时返回空字符串，也可以改成你需要的默认值
    return '';
}

关键改进点说明 #

• decodeURIComponent()：把URL里的转义字符（比如%20）转成正常空格，同时兼容Excel导出的未编码空格。
• 正则/&+/分割：不管是单个&还是不小心出现的多个&，都能正确分割参数对。
• 解构赋值处理参数对：代码更简洁，同时处理参数值为空的边界情况。

如何在HTML页面展示参数 #

假设你有这样的页面结构用来展示参数：

<div class="parameter-container">
    <p>abc 参数值：<span id="abc-val"></span></p>
    <p>def 参数值：<span id="def-val"></span></p>
    <p>ghi 参数值：<span id="ghi-val"></span></p>
</div>

用jQuery在页面加载完成后填充内容：

$(document).ready(function() {
    $('#abc-val').text(getURLParameter('abc'));
    $('#def-val').text(getURLParameter('def'));
    $('#ghi-val').text(getURLParameter('ghi'));
});

测试你的示例URL #

如果你的URL是https://www.example.com?abc=anything&def=hello world&ghi=father & son，运行后会正确显示：

• abc 参数值：anything
• def 参数值：hello world
• ghi 参数值：father & son

这样就能完美适配Excel导出的参数格式啦！

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