如何将脚本变量传入HTML并解决URL参数%20编码问题？

嗨，很高兴看到你已经成功把参数传递到新页面了！咱们来一步步解决你遇到的两个问题：

1. 为啥会出现%20？ #

%20其实是空格字符的URL编码形式——因为URL规范里不允许直接出现空格，浏览器会自动把空格转换成%20来保证URL合法。比如你传递的名称是Martin Garcia，就会被转成Martin%20Garcia。

2. 正确获取并解码参数的方法 #

你的getUrlVars函数已经能拿到参数值，但缺少了解码步骤。只需要用decodeURIComponent()函数，就能把编码后的字符串还原成正常文本。

修改你的函数如下：

function getUrlVars() {
    var vars = [], hash;
    // 先判断URL里有没有参数，避免找不到?时报错
    if (window.location.href.indexOf('?') === -1) return vars;
    
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++){
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        // 对参数值进行解码，去除%20这类编码
        vars[hash[0]] = decodeURIComponent(hash[1]);
    }
    return vars;
}

这样再调用volar()函数获取参数时，%20就会自动转换成正常的空格啦。

3. 优化跳转时的参数拼接（重要！） #

另外，你跳转页面的代码里有个小问题：URL参数的起始符号是?，你原来的代码写的是"Acerca.html proced=..."，少了?，这会导致参数解析异常。同时，规范的做法是用encodeURIComponent()对参数值提前编码，避免特殊字符（比如空格、中文）引发的问题：

// 修正跳转代码
location.href = "Acerca.html?proced="+encodeURIComponent(Nombres)+"&proce="+encodeURIComponent(Cedula);

测试验证 #

修改完之后，刷新页面调用volar()，你页面上的sirve元素就能显示正常的名称，不会再出现奇怪的%20了！

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