Question

How can add a class to an a href tag with specific words?
I want every instance of an a tag with ‘click here’ and ‘more information’ to add a class.

<a href="">click here</a> <a href="">more information</a>

To become:

<a href="" class="arrow">click here</a> <a href="" class="arrow">more information</a>

Some links have word-breaks on them, causing the “contains” array to miss them:

    <a title="Vision and Values" href="/about-us/vision-and-values.aspx">click
here</a>

It’s not a <br/> but the HTML is rendering the two words on separate lines

Answer 1

Use filter, if you want to exactly match “click here”:

$('a').filter(function() {
    var text = $(this).text();
    return text === 'click here' || text === 'more information';
}).addClass('arrow');

Or if you have a lot of conditions, use inArray http://api.jquery.com/jQuery.inArray/:

$('a').filter(function() {
    var whitelist = ['click here', 'more information'];
    var text = $(this).text();
    return $.inArray(text, whitelist) != -1;
}).addClass('arrow');

Because JavaScript treats 0 as loosely equal to false (i.e. 0 ==
false, but 0 !== false), if we’re checking for the presence of value
within array, we need to check if it’s not equal to (or greater than)
-1.

That way, if you have an additional text to match, you just need to add to that array.

You could also use contains, but it will match things like click here 2 etc, basically anything that contains “click here”, but not exactly that.

$('a:contains(click here),a:contains(more information)').addClass('arrow');