JS：检查查询字符串以获取不在数组中的 GET 变量？

Question

假设我有一个地址：

www.example.com/index.php?a=1&b=2&c=3

我想将它输入到这样的输入字段中（值最初显然是空白的）：

<input id="my-input-field" value="www.example.com/index.php?a=1&b=2&c=3">

然后我希望 JS 解析 ? 之后的所有内容，获取所有查询（“a”、“b”、“c”）并查看它们是否存在于 array() 中。

然后我想显示一条消息，说明给定 URL 中的某些项目丢失了 - 但这是最​​简单的部分。

我无法弄清楚的部分是：如何分解 URL 并且只找到每个查询的第一部分？

---

我了解如何去掉问号之前的所有内容（包括问号）：

var str = "www.example.com/index.php?a=1&b=2&c=3";
str = str.substring(str.indexOf("?") + 1);
alert(str);

小提琴：http://jsfiddle.net/xx3fwhvv/

这会返回：a=1&b=2&c=3

---

下一步可能是将字符串拆分为每个 &?

var str = "a=1&b=2&c=3";
str = str.split("&");
alert(str);

小提琴：http://jsfiddle.net/3Lo24byo/

返回：a=1,b=2,c=3

---

然后我们可以像这样删除= 符号之后的所有内容：

var str = 'a=1';
str = str.substring(0, str.indexOf('='));
alert(str);

小提琴：http://jsfiddle.net/vfzvu5mh/

这会导致：a

现在的问题是如何循环遍历数组并为每个项目执行此操作？这将是我需要采取的步骤。

---

然后我需要一个数组，如：

var myArray = array('a','c','d');

在上面的数组中，交叉检查我们在上面创建的数组，看看是否有任何匹配的值应该返回 b 不匹配，因为它不在 myArray 中。

这就是我卡住的地方。任何帮助表示赞赏。我不太擅长 JS，但我一直在努力解决这个问题。

---

到目前为止，代码看起来像这样：

var str = "www.example.com/index.php?a=1&b=2&c=3";
newStr = str.substring(str.indexOf("?") + 1);
strArray = newStr.split("&");

i = 1;
for {
  newStrArray = strArray[i].substring(0, strArray[i].indexOf('='));
  i++;
}

以上对我不起作用，但无论如何都是这样的。

---

编辑（我将积极编辑这部分，直到问题得到解答）：

var str = "www.example.com/index.php?a=1&b=2&c=3";
var newStr = str.substring(str.indexOf("?") + 1);
var myStringArray = newStr.split("&");

var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  myStringArray = myStringArray[i].substring(0, myStringArray[i].indexOf('='));
  alert(myStringArray[i]);
}

当前小提琴：https://jsfiddle.net/03ho0nbz/

Answer 1

首先，您将用子字符串的结果覆盖您的数组：

myStringArray = myStringArray[i].substring(0, myStringArray[i].indexOf('='));

myStringArray 接收子字符串的结果，把它变成一个字符串。

要比较 myArray 和 otherArray 并查看 myArray 中是否不存在元素，可以使用 indexOf() 函数：

var myArray = ['a', 'c', 'd'];
var otherArray = ['a', 'b', 'c'];

for(var i=0;i<otherArray.length;i++) { 
    if(myArray.indexOf(otherArray[i]) === -1) {
        console.log('myArray does not have', otherArray[i]); // myArray does not have b
    }
}

按照您的示例，这将创建一个类似于以下内容的循环：

var str = "www.example.com/index.php?a=1&b=2&c=3";
var newStr = str.substring(str.indexOf("?") + 1);
var myStringArray = newStr.split("&");
var myArray = ['a', 'c', 'd'];

for (var i = 0; i < myStringArray.length; i++) {
  var eqIndex = myStringArray[i].indexOf('=');
  if(eqIndex !== -1) {
      var key = myStringArray[i].substring(0, eqIndex);
      if(myArray.indexOf(key) === -1) {
          alert(key, "not in myArray!");
      }
  }
}

请注意，这种编写 JS 的方式非常适合学习实践，但如果您打算在专业环境中使用 JS，请阅读一些 JS 良好实践。

我要做的就是像你一样摆弄 JS，试着看看你是否可以购买一些 JS 良好实践的书籍，并看看流行的框架是如何解决问题的。出于专业目的，使用维护和支持良好的框架几乎总是一个好主意。例如，如果您在这种情况下使用 underscore，您可以执行以下操作：

var paramKeys = _.chain("a=1&b=2&c=3".split('&')).map(function(params) {
    var p = params.split('=');
    return p[0];
}).value();
_.difference(paramKeys, ['a', 'c', 'd']) // "b"

Answer 2

@mattroberts33 我无法理解您为什么要检查 url 中的第一个参数，从 www.example.com/index.php?a=1&b=2&c=3 到 www.example.com/index 有什么尊重吗.php?b=2&a=1&c=3。我会鼓励基于键而不是索引读取参数。在任何 url 查询参数可能会混乱。

下面的方法会通过传递key和url给方法返回参数：

var getParameterByName = function (name, url) {
name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
if (url) {
  var results = regex.exec(url);
} else {
  var results = regex.exec(location.search);
}
return results == null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));};

如果你还想根据索引获取，我们可以修改上面的方法，但这并不令人鼓舞。