How to get portion of the attribute value using jquery

Question

I have attribute value as:

<div id = "2fComponents-2fPromotion-2f" class = "promotion">

Now I want to get only portion of it, say Promotion and its value 2f, how can I get this using jquery ? Do we have built in function for it ?

Answer 1

You can use a regular expression here:

var attId = $(".promotion").attr("id");

// Perform a match on "Promotion-" followed by 2 characters in the range [0-9a-f]
var match = attId.match(/Promotion-([0-9a-f]{2})/);

alert(match[1]); // match[0] contains "Promotion-2f", match[1] contains "2f"

This assumes that the "value" of Promotion is a hexadecimal value and the characters [a-f] will always be lower case. It's also easily adjusted to match other values, for instance, if I change the regex to /component-([0-9a-f]{2})/, the match array would be ["component-3a", "3a"].

The match method takes a regular expression as its input and searches the string for the results. The result is returned as an array of matches, with the first index being the complete match (equivalent regex for this only would be /Promotion-[0-9a-f]{2}/). Any sub-expression (expressions enclosed in parenthesis) matches are added to the array in the order they appear in the expression, so the (Promotion) part of the expression is added to the array at index 1 and ([0-9a-f]{2}) is added at index 2.

match method on MSDN

Answer 2

var id = $("div.promotion").attr("id");
var index = id.indexOf("Promotion");
var promotion = '';

// if the word 'Promotion' is present
if(index !== -1) {

    // extract it up to the end of the string
    promotion = id.substring(index);

    // split it at the hyphen '-', the second offset is the promotion code
    alert(promotion.split('-')[1]);
} else {
    alert("promotion code not found");
}

Answer 3

you can get the id attribute like this:

var id= $('div.promotion').attr('id');

But then I think you would have to use regular expressions to parse data from the string, the format doesn't appear to be straight forward.

If you are storing lots of info in the id could you consider using multiple attributes like:

<div class="promotion" zone="3a-2f-2f" home="2f"></div>

Then you could get the data like this:

var zone= $('div.promotion').attr('zone');
var home= $('div.promotion').attr('home');

Or you could use jQuery.data()

HTH

Answer 4

 $(function () {

        var promotion = $('.promotion').attr('id').match(/Promotion-([0-9a-f]{2})/);

        if (promotion.length > 0) {

            alert(promotion[1]);
        }

        else {

            return false;
        }

    });