Case-insensitive attribute-value selector with Jquery

Question

I need to get the value of the content attribute of a certain meta tag.

var someContent = $("meta[name=someKindOfId]").attr("content");

is how I usually do it. For business reasons, someKindOfId may be somekindofid. It could be other combinations of cases as well. I don't know.

What is the best way to search for this meta tag? Adding an id or other identifier is out of the question.

See this post, pretty good solution: stackoverflow.com/questions/187537/… — Eli
– Eli, Commented Apr 22, 2011 at 13:16

Community · Accepted Answer · 2017-05-23 11:46:50Z

27

You could use the jquery filter function like so

var meta = $('meta[name]').filter(function() {
    return this.name.toLowerCase() == 'somekindofid';
});

Based upon CSS selector case insensitive for attributes

http://jsfiddle.net/nickywaites/mkBvC/

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Apr 22, 2011 at 13:17

Nicky Waites

2,42818 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Johnson Over a year ago

Perfect. var someContent = $('meta[name]').filter(function() { return this.name.toLowerCase() == 'somekindofid'; }).attr("content");

Nicky Waites Over a year ago

Something I noticed with that solution Josh is that it will only return the content for 1 meta tag. I'm not sure if you'd have multiple meta tags with the same name but here's an updated fiddle - jsfiddle.net/nickywaites/mkBvC/1

alexcasalboni Over a year ago

This is a working solution, but not very reusable. Please check my jQuery expression answer. :)

Erik Aronesty · Accepted Answer · 2014-01-31 18:48:22Z

5

Also, for case insensitive attribute *= selector:

$("meta[name*=someKindOfId]")

You can use:

$('meta').filter(function() {
       return (/somekindofid/i).test($(this).attr('name'));
}).attr("content")

edited Jan 31, 2014 at 18:48

Erik Aronesty

13.2k6 gold badges73 silver badges47 bronze badges

answered Apr 22, 2011 at 13:17

Flash

16.9k15 gold badges74 silver badges100 bronze badges

1 Comment

Erik Aronesty Over a year ago

Thisis like a *=, not =, but it's what i was looking for

alexcasalboni · Accepted Answer · 2015-07-20 09:52:10Z

How about this?

You can reuse the case-insensitive jQuery expression, as shown in the snippet below (execute it to see how the first div matches, while the second does not).

$.expr[':'].iAttrContains = function(node, stackIndex, properties){
    var args = properties[3].split(',').map(function(arg) {
        return arg.replace(/^\s*["']|["']\s*$/g, '');  
    });
    if ($(node).attr(args[0])) {
        //exact match:
        return $(node).attr(args[0]).toLowerCase() == args[1].toLowerCase();
        //if you actually prefer a "contains" behavior:
        //return -1 !== $(node).attr(args[0]).toLowerCase().indexOf(args[1].toLowerCase());
    }
};

$("div:iAttrContains('data-name', 'test')").addClass('matched');

div{background:red;}
div.matched{background:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div data-name="This is a test">First div</div>
<div data-name="This is a div">Second div</div>

Collectives™ on Stack Overflow

Case-insensitive attribute-value selector with Jquery

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related