Search for a partial class name, return the full class name

Question

Figure this out:

Page A contains this in body :

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

Page B contains:

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

I can use this script to determine 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 the rest of the class name, for example. "overlay-results" or, if required, all div content, for example. " <div class="overlay-results"><span></span></div> "?

There are many other similar pages with different names "overlay-", so I do not want to do one search for each of them, so this approach is "one size fits all."

Answer 1

You can use the regex and rewrite it as follows:

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

Answer 2

You can use this jQuery selector, for example

This will give you elements that have overlay somewhere by the name of their class.

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

This will give you elements whose class names begin with overlay .

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

This will give you elements whose class names end in overlay .

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

EDIT:

To use this in your code, you can do something like:

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

This function fi nd elements, superimposed in their class name a returns the full name of the class.

Answer 3

To select an item that starts , use ^ as [class^="overlay-"] .

To return all elements with the start of the class , you can: -

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

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

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

or when multiple classes exist, 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 to match the overlay, and not the value of the attribute class for the element. Performing a partial attribute search using the selector, we can get all the elements that match this search, and then iterate over them, extracting from our classes those that correspond to the private 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-"); 

Output: [overlay-homepage,overlay-results] or something else on the page, if you need only one result, you can just do getFullClass("overlay-")[0]

Answer 5

Simple use of .find() in jquery.

Get the children of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

 $(function() { if($('body').find("[class^='overlay-']").length) { alert('it works'); } }); 

Answer 6

Using the SMACSS methodology ( https://smacss.com/book/ ), you can modulate various areas of your site based on layout and structure. The page layout receives top-level classes that apply basic and general styles, and any page-specific styles are applied through word-spaced classes. For example, all overlays have the .ovr class, which indicates that overlays and .ovr-homepage , .ovr-results classes and unique styles will be applied.

You can get all overlay modules with $('body .ovr'); or specific overlays using $('body .ovr-homepage'); or $('body .ovr.ovr-homepage'); .

Instead of overusing it with JS, you can solve it using CSS structure and organization.