jQuery - Extract name of class based on prefix

Question

I'm using WordPress and I need to get part of a class name stored in the body tag.

I would like to extract word(s) after post-type prefix.

<body class="post-php post-type-dissertation is-fullscreen-mode wp-embed-responsive customize-support svg">
<body class="post-php post-type-subject-imposed is-fullscreen-mode wp-embed-responsive customize-support svg">

In my examples I would like to get dissertation or subject-imposed after post-type prefix.

With my code I get all classes after post-type

var $cn = jQuery('body[class*="post-type"]').attr('class');
console.log($cn.split('post-type-')[1]);

Example of output :

dissertation is-fullscreen-mode wp-embed-responsive customize-support svg

How can I delete all others classes and keep dissertation or subject-imposed words ?

MD Sadique Imam · Accepted Answer · 2021-05-31 15:09:36Z

1

var cn = jQuery('body[class*="post-type"]').attr('class');

finder = 'post-type'
my_str = ''
cn.split(' ').forEach(function(item) {
  if(item.indexOf(finder) != -1){
    my_str = item.split('-').splice(2, 2).join('-')
    
  }
});

console.log(my_str)

answered May 31, 2021 at 15:09

MD Sadique Imam

366 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jandon Over a year ago

This is perfect, thank you for your help. That's works fine. You have tested each classes in body tag. The correct class was splited and splice after 2 first words and join the others words right ?

MD Sadique Imam Over a year ago

Yes, I was in hurry that time so I couldn't explain it. I am checking each class one by one if substr contains. Once we got it we can break the loop also. And then removing substr using splice function.

Abdur Rahman · Accepted Answer · 2021-05-31 14:57:16Z

1

All you can do is get all class as one string. Then split the classes into an array of class. Loop through the class array and search for the your desired text.

jQuery(document).ready(function($) {

  var body_class = $('body').attr('class');
  var class_array = body_class.split(' ');
  class_array.forEach(function(ele) {
    if (ele.search("post-type-") != -1) {
      console.log(ele);
    }
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="post-php post-type-subject-imposed is-fullscreen-mode wp-embed-responsive customize-support svg">

answered May 31, 2021 at 14:57

Abdur Rahman

563 bronze badges

Comments

Swati · Accepted Answer · 2021-05-31 15:15:19Z

1

You can get all classes then split them to convert them as array then loop through all classes and check if it has post-type in it or not depending on this remove class .

Demo Code :

var $cn = jQuery('body').attr('class').split(/\s+/); //split..
console.log("BEFORE :  " + jQuery('body').attr('class'))
$($cn).each(function(i) {
  //check if has value..
  if ($cn[i].indexOf("post-type") < 0) {
    jQuery('body').removeClass($cn[i]) //remove class...
  }
})
console.log("AFTER :" + jQuery('body').attr('class').split('post-type-')[1])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<body class="post-php post-type-dissertation is-fullscreen-mode wp-embed-responsive customize-support svg">
</body>

edited May 31, 2021 at 15:15

answered May 31, 2021 at 14:54

Swati

28.5k4 gold badges26 silver badges45 bronze badges

1 Comment

Jandon Over a year ago

Thank you for your help, this is a solution

Carsten Massmann · Accepted Answer · 2021-05-31 15:29:19Z

jQuery helps you a lot here. No need to process the elements individually, as jQuery can handle them all in one go:

// $(".post-type-dissertation,.post-type-subject-imposed") // clear only for selected divs
   $("div[class*=post-type]") // clear for all divs with class = post type... 

     .attr("class",(i,cls)=>cls.match(/\b(post-type-(dissertation|subject-imposed))\b/g)||[].join(" "));

   $("div").each(function(){console.log(this.className)});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="post-php post-type-dissertation is-fullscreen-mode wp-embed-responsive customize-support svg">dissertation</div>
<div class="post-php post-type-subject-imposed is-fullscreen-mode wp-embed-responsive customize-support svg">subject imposed</div>
<div class="post-php post-type-something-else is-fullscreen-mode wp-embed-responsive customize-support svg">something else</div>
<div class="post-php post-type-and-this-too is-fullscreen-mode wp-embed-responsive customize-support svg">and this too</div>

In the sample above I replaced body by div as you cannot have multiple bodies in an SO snippet.

Depending on whether you want to clear away the other classes for all divs or only for those where the search classes can be found, you can adapt the first selector to "div". That would leave the last two divs without any classes.

Collectives™ on Stack Overflow

jQuery - Extract name of class based on prefix

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related