在jQuery中获取锚标记值

Question

I have a html tag like this.

<a class="employee_details" target="_blank" href="index1.php?name=user1&id=123">User</a>

I need to get the two parameter values in jquery

<script type="text/javascript">
    $(function () {
        $('.employee_details').click(function () {
            var status_id = $(this).attr('href').split('name');
            alert(status_id[0]);
        });
    });
</script>

Any help in getting both the parameter values in two variables in javascript.

I want to get user1 and 123 in two variables using jQuery

Thanks Kimz

Answer 1

Try this logic:

var href = $(this).attr('href');
var result = {};
var pars = href.split("?")[1].split("&");

for (var i = 0; i < pars.length; i++)
{
    var tmp = pars[i].split("=");
    result[tmp[0]] = tmp[1];
}

console.log(result);

So you'll get the parameters as properties on result object, like:

var name = result.name;
var id = result.id;

Fiddle .

UPDATE:

For the down-voter who could not undertand this, an implemented version:

var getParams = function(href)
{
    var result = {};
    var pars = href.split("?")[1].split("&");

    for (var i = 0; i < pars.length; i++)
    {
        var tmp = pars[i].split("=");
        result[tmp[0]] = tmp[1];
    }

    return result;
};

$('.employee_details').on('click', function (e) {
    var params = getParams($(this).attr("href"));
    console.log(params);

    e.preventDefault();
    return false;
});

Fiddle .

Answer 2

$(function() {
    $('.employee_details').on("click",function(e) {
        e.preventDefault(); // prevents default action
        var status_id = $(this).attr('href');
        var reg = /name=(\w+).id=(\w+)/g;
        console.log(reg.exec(status_id)); // returns ["name=user1&id=123", "user1", "123"]
    });
});

// [0] returns `name=user1&id=123`
// [1] returns `user1`
// [2] returns `123`

JSFiddle

NOTE: Better to use ON method instead of click

Answer 3

Not the most cross browser solution, but probably one of the shortest:

$('.employee_details').click(function() {
    var params = this.href.split('?').pop().split(/\?|&/).reduce(function(prev, curr) {
        var p = curr.split('=');
        prev[p[0]] = p[1];
        return prev;
    }, {});

    console.log(params);
});

Output:

Object {name: "user1", id: "123"}

If you need IE7-8 support this solution will not work, as there is not Array.reduce .

Answer 4

$(function () {
    $('.employee_details').click(function () {
        var query = $(this).attr('href').split('?')[1];
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            var varName = decodeURIComponent(pair[0]);
            var varValue = decodeURIComponent(pair[1]);
            if (varName == "name") {
                alert("name = " + varValue);
            } else if (varName == "id") {
                alert("id = " + varValue);
            }
        }            
    });
});

Answer 5

It's not very elegant, but here it is!

var results = new Array();
var ref_array = $(".employee_details").attr("href").split('?');
if(ref_array && ref_array.length > 1) {
    var query_array = ref_array[1].split('&');
    if(query_array && query_array.length > 0) {
        for(var i = 0;i < query_array.length; i++) {
            results.push(query_array[i].split('=')[1]);
        }
    }
}

In results has the values. This should work for other kinds of url querys.

Answer 6

It's so simple

// function to parse url string
function getParam(url) {
    var vars = [],hash;
    var hashes = url.slice(url.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;
}

// your code
$(function () {
    $('.employee_details').click(function (e) {
        e.preventDefault();
        var qs = getParam($(this).attr('href'));
        alert(qs["name"]);// user1
        var status_id = $(this).attr('href').split('name');
    });
});