Question

I have following html menu:

<ul>
    <li><a href="About/about-page.html"></a></li>
    <li><a href="Services/services-page.html"></a></li>
</ul>

How can I with jQuery check if current URL have string of for example ‘About/’ (as ‘about’ any case + ‘ / ‘ ) in it?

Where ‘About/’ can be any word.

Basically run through my menu and check if there’s a string same as the part of the URL.
For example that:

• http://www.website.com/about/ = true
• http://www.website.com/about/something.html = true
• http://www.website.com/about-something.html = false
• http://www.website.com/services/about.html = false

Any help much appreciated.

Answer 1

Assuming a variable currentURL contains the string you wish to check, and you don’t care whether it’s got an uppercase ‘A’ or not:

if(currentURL.toLowerCase().indexOf("about") != -1) {
   //Contains 'about'
}

If you want to use the URL of the current page:

var currentURL = window.location.href;

Based on your comment, I think you are trying to apply a class to any a element in your list with the word “about” in the href attribute. In that case:

$("li > a").filter(function() {
   if($(this).attr("href").toLowerCase().indexOf("about") != -1) return true;
   return false;
}).addClass("newClass");

Update (based on your comments)

You can wrap this in a function that takes the keyword to look for, and the name of the class to add, then call it whenever necessary:

function applyClass(keyword, class) {
    $("li > a").filter(function() {
       if($(this).attr("href").toLowerCase().indexOf(keyword) != -1) return true;
       return false;
    }).addClass(class);
}
applyClass('service', 'newClass'); //Or for example applyClass('about', 'newClass');