Get all class names starting with a specific prefix with JavaScript / jQuery

Question

I want to extract classes based on specific prefix like "category-lifestyle" or "category-magazine".

The HTML markup looks like this:

<article id="post-361" class="et_pb_post post-361 post type-post status-publish format-standard has-post-thumbnail hentry category-lifestyle category-magazine">

    Post content... 

</article>

Possible duplicate of [jquery how to select all the class elements start with "text-"?](https://stackoverflow.com/questions/4161869/jquery-how-to-select-all-the-class-elements-start-with-text) — Liam, Jan 02 '18 at 10:44
@Javid Did anyone solve your problem? If so, could you please accept the best answer (click the checkmark under the points). That will help other users that come across your question quickly spot the accepted answer and it also gives 15 rep. points to the author (: — Danziger, Jan 31 '18 at 05:19

score 0 · Answer 1 · answered Jun 04 '17 at 10:13

0

you can use the following selector:

console.log(
   document.querySelectorAll("article[class*='category-lifestyle']")[0].innerHTML
);

answered Jun 04 '17 at 10:13

1

then search for classList ... [that has always be answered](https://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery) – Jun 04 '17 at 11:07

score 0 · Answer 2 · answered Jun 04 '17 at 14:02

If you want to get a list of all the classes that start with, let's say, category-, you should first get all the elements that contain a matching class using an attribute contains selector:

document.querySelectorAll("*[class*='category-']")

Then you should extract all the classes of those elements and filter out duplicates and those that do not start with the desired prefix.

Something like this:

const allCategoryClasses = [];

// Get all elements that have any class starting
// with 'category-':

const elementsWithCategoryClasses
  = document.querySelectorAll("*[class*='category-']");

const elementsCount = elementsWithCategoryClasses.length;

for (let i = 0; i < elementsCount; ++i) {
  // Append all the classes of the matching elements to
  // allCategoryClasses.

  // Note we are not filtering out the other classes that
  // do not start with 'category-' yet.
  
  Array.prototype.push.apply(
    allCategoryClasses,
    elementsWithCategoryClasses[i].classList
  );
}

// Now filter out the classes that do not start with
// 'category-' here, so we do it just one time, instead
// of doing it once for each single element.

// Also, use and object to remove duplicates.

const presentClasses = {};

console.log(allCategoryClasses
  .filter((classname) => {
    const present = presentClasses[classname];
    
    presentClasses[classname] = true;
    
    return classname.indexOf("category-") === 0 && !present;
  }));
    
// This will also filter out duplicates:

// const presentClasses = {};

// allCategoryClasses
//   .forEach((classname) => {
//     if (classname.indexOf("category-") === 0) {
//       presentClasses[classname] = true;
//     }
//   });
  
// console.log(Object.keys(presentClasses));

<div class="category-a other-class"></div>
<div class="other-class category-b"></div>
<div class="category-c category-d other-class"></div>
<div class="category-e other-class category-f"></div>
<div class="other-class"></div>
<div class="category-e other-class category-f"></div>

Get all class names starting with a specific prefix with JavaScript / jQuery

2 Answers2