jQuery 如何從單擊的鏈接中獲取查詢參數的值

Question

給定這樣的鏈接：

<a href="/users/xxxx?width=640" class="dialogOnClick">Create Account</a>

我有

$('.dialogOnClick').live('click', function() {
    // How to get 640, given we look for the width param?
    console.log( $(this).?????)
});

當用戶單擊帶有 class dialogOnClick 的鏈接時，我想檢查是否有寬度查詢參數，如果有，則獲取該值。 在上述情況下為 640。這可能嗎？

謝謝

Answer 1

元素的search屬性將包含查詢字符串。

然后，您可以將其解析為鍵值對，或者在這個簡單的示例中使用正則表達式。

$('.dialogOnClick').live('click', function() {
    console.log( this.search.match(/width=(\d+)/)[1] );
});

js小提琴。

但是，如果沒有匹配項，這將失敗。 您可能希望將match()的返回分配給一個變量，並首先測試它是否具有必需的元素。

Answer 2

$('.dialogOnClick').live('click', function() {

    var href = $(this).attr('href');
    var indexOfWidth = href.indexOf('width=');
    var value = href.substr(indexOfWidth).split("=")[1];

    console.log( value );
});

jsfiddle

Answer 3

如果您只想要尾隨數值，那么您可以使用：

this.href.match(/\d+$/)[0];

但是，如果您特別想要寬度值，則可以使用：

this.href.match(/width=\d+/)[0].match(/\d+$/)[0]

或者，如果您想要一種更穩健的方法來獲取多個參數中的一個，那么您需要解析 URL：

  function getParams(url) {
    var paramString = url.split('?')[1];
    var paramArray = [];
    var params = {};
    var p;

    if (paramString && paramString.length) {
      paramArray = paramString.split('&');

      for (var i=0, iLen=paramArray.length; i<iLen; i++) {
        p = paramArray[i].split('=');
        params[p[0]] = p[1];
      }
    }
    return params;
  }

並且可以做到：

getParams(this.href)['width'];

POJS 工作示例：

<a href="/users/xxxx?width=640" class="dialogOnClick"
  onclick="alert(this.href.match(/\d+$/)[0]);return false;">Create Account</a>

<a href="/users/xxxx?width=640" class="dialogOnClick"
  onclick="alert(getParams(this.href).width);return false;">Create Account 2</a>

Answer 4

您可以使用 jQuery 來獲取href的內容：

var href = $(this).attr('href');

還有一個正則表達式來解析該文本以確定是否有寬度參數，並提取值：

var pattern = /width=([0-9]*)/g;
var match;    

while (match = pattern.exec(href))
{
    alert(match);
    // Do something with the match (["width=640", "640"]) here...
}

這是一個活生生的例子。