Javascript Url 参数解析答案

【问题标题】：Javascript Url Parameter parsingJavascript Url 参数解析
【发布时间】：2012-05-15 22:09:19
【问题描述】：

所以，我真的需要一些帮助。我进行了广泛的搜索，发现一些解决方案很棒，但对我不起作用，所以这里......

当有人访问我的网站时，他们会点击一个链接，该链接会将 URL 传递给“recipes.html”...例如，如果他们点击“Ancho Chile Sauce”，则该 URL 将是：

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

这个参数实际上是“Recipes”文件夹中一个JPEG的名称，当然扩展名为“.jpg”

我需要把这个参数变成一个字符串，并在它之前添加“Recipes/”，在它之后添加“.jpg”，然后在我的 html 文档中更改图像标签的来源以显示新的动态调用的食谱图像。

我以为我已经做到了，但似乎没有任何效果。显然我在 Javascript 中做错了什么，因为我的标记工作正常并且带有参数的 url 正在被传递。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Recipes</title>
<link href="mobi-styles.css" rel="stylesheet" />
<script type="text/javascript">
function getParam ( sname )
{
  var params = location.search.substr(location.search.indexOf("?")+1);
  var sval = "";
  params = params.split("&");
    // split param and value into individual pieces
    for (var i=0; i<params.length; i++)
       {
         temp = params[i].split("=");
         if ( [temp[0]] == sname ) { sval = temp[1]; }
       }
  return sval;
}
window.onload = changePic();
var param = getParam("r");
var recipeName = "Recipes/"+param+".jpg";
function changePic() {
document.getElementById("recipe").src=recipeName;
}
</script>
</head>

<body>
<img class"resizer" id="recipe" src="" />
</body>
</html>

请帮忙！我爱你很久了！

【问题讨论】：

有什么问题？有什么错误吗？尝试将“recipe”图像的“src”属性硬编码到“recipeName”的摘录中

标签： javascript html url

【解决方案1】：

删除()。附加事件时，您分配一个函数，而不是函数调用的结果。您所做的是调用changePic()，返回sval 并将sval 的值分配给window.onload - 这是错误的。

window.onload = changePic;
                         ^---remove ()

并将window.onload = changePic 移动到底部，这样 JSLint 就不会生气了。最佳实践是在使用函数之前先声明函数，即使有提升也是如此。

【讨论】：

天哪——！！！这做到了！非常感谢！我已经在这个功能上工作了 5 个小时......很难相信它是如此简单......你能告诉我我仍然是编程的菜鸟吗？哈！
@Spartacus 每个知识渊博的人从某个时候开始都是菜鸟：D

【解决方案2】：

我以前写过一个小脚本，可以让我访问 url 参数，它非常有效。它在文件的开头运行，因此您可以随时访问它们。

GET = (function () {
    var get = {
        push:function (key,value){
            var cur = this[key];
            if (cur.isArray){
                this[key].push(value);
            }else {
                this[key] = [];
                this[key].push(cur);
                this[key].push(value);
            }
        }
    },
    search = document.location.search,
    decode = function (s,boo) {
        var a = decodeURIComponent(s.split("+").join(" "));
        return boo? a.replace(/\s+/g,''):a;
    };
    search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function (a,b,c) {
        if (get[decode(b,true)]){
            get.push(decode(b,true),decode(c));
        }else {
            get[decode(b,true)] = decode(c);
        }
    });
    return get;
})();

现在你可以访问你想要的参数了：

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

GET['r']; // will print: Ancho-Chile-Sauce

或

GET.r;

如果参数重复多次，则存储为数组；

example.com/test?name=John&name=Smith

name 属性变成一个数组

GET.name[1] ; // Smith

希望对你有帮助

【讨论】：

超级，只需将正则表达式更改为 /\??(?:([^=&]+)=?([^&]*)&?)/g 所以它也接受空值而不=

【解决方案3】：

改变这个：

if ( [temp[0]] == sname ) { sval = temp[1]; }

到这里：

if ( temp[0] == sname ) { sval = temp[1]; }

【讨论】：

【解决方案4】：

这是我用来收集 URL 变量的：

JQUERY 扩展

$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    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]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

你可以这样使用它：

// blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce

var r = $.getUrlVar('r');

alert(r); // outputs 'Ancho-Chile-Sauce'

function changePic() {
  $('#recipe').attr("src", r);
}

如果您不使用 Jquery，仅使用 JavaScript 的解决方案是：

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);
}

并且可以这样使用：

var r = getQueryVariable("r");

alert(r); // outputs 'Ancho-Chile-Sauce'

function changePic() {
  document.getElementById("recipe").src = r;
}

【讨论】：

我应该替换所有现有功能吗？然后我将如何使用我的 document.getElementByID 中的输出？？？？
刚刚编辑了这两个选项以显示如何将 r 值传递给 src 的 #recipe。

【解决方案5】：

parseURLparameters(string) {
    let parsed = {};
    (string.split('?')[1] || string).split('&')
                                    .map((item) => {
                                        return item.split('=');
                                    })
                                    .forEach((item) => {
                                        parsed[item[0]] = item[1];
                                    });
    return parsed;
}

所以你可以传递任何字符串：

'?asd'
'?asd=123'
'asd=&kjnwer=13'

等等……

【讨论】：