Search for partial class name, return full class name

Question

Picture this:

Page A contains this in the body:

<div class="overlay-homepage"><span></span></div>

Page B contains:

<div class="overlay-results"><span></span></div>

I can use this script to identify if they contain an overlay class with this:

function() {
    var htmlString = $('body').html().toString();
    var index = htmlString.indexOf("div class=\"overlay-");
    if (index != -1)
        return("It works");
}

For the return value, instead of "It works", how do I get it to pull in the rest of the class name e.g. "overlay-results" or if needs be the whole div content e.g. "<div class="overlay-results"><span></span></div>"?

There are many other pages like this with different 'overlay-' class names so I don't want to do one search for each hence this 'one size fits all' approach.

Answer 1

You can use this jQuery selector, for example

This will give you elements which has overlay somewhere on their class name.

$('div[class*=overlay]')

This will give you elements which class name starts with overlay.

$('td[class^=overlay]')

This will give you elements which class name ends with overlay.

$('td[class$=overlay]')

EDIT:

To use this on your code you can do something like:

function() {
  var attr = $('div[class*=overlay]').attr('class');
  return(attr);
});

This function fi nd the elements with overlay in their class name a returns the complete class name.

Answer 2

You could use a regular expression and rewrite it like this:

function() {
  var htmlString = $('body').html().toString();
  var matches = htmlString.match(/class="(overlay-[^\s"]*)/);
  if (matches.length)
    return(matches[1]);
}

Answer 3

To select an element which starts with, use ^ like [class^="overlay-"].

To return all elements with that starting class, you can:-

function allOverlays() {
   // all elements
   return $('div[class^="overlay-"]');

   //or for the first element
   return $('div[class^="overlay-"]:eq(0)');
}

or to return the class when there is only one, you can use:-

function overlayClass() {
   return $('div[class^="overlay-"]:eq(0)').attr('class');
}

or when there are multi classes, use:-

function overlayClass() {
   var classes = $('div[class^="overlay-"]:eq(0)').attr('class');
   return /overlay-\w+/.exec(classes)[0];
}

Answer 4

If I understand correctly you want the full class that matches the overlay, and not the value of the attribute class for the element. By doing a partial attribute search with a selector we can get all elements that match that search, then iterate through them, extracting from their classes the ones that match the give partial class.

function getFullClass(partialClass) {
    foundClasses = [];
    $("[class*='" + partialClass + "']").each(function (i, e) {
        foundClasses.push($(e).attr("class").split(" ").filter(function (d) {
            return d.indexOf(partialClass) >= 0
        }));
    });
    return foundClasses;
}

//Callable like:
getFullClass("overlay-");

Would output: [overlay-homepage,overlay-results] or whatever is on page, if you only want one result, you can simply do getFullClass("overlay-")[0]