Add dynamic class to element

Hi I have variable classes called "fx -..." I would like to add a class named without suffix "fx-".
For example "fadeUp".
How can I do?

<h1 class="way-animate fx-fadeUp">Title</h1>

Your question isn't clear, I think you want to know 'how to add dynamic class name'. Can you please elaborate your what you asking for.

suppose you have a variable

let cls = 'fx-fadeUp';

You can easily remove fx- using javascript like this

cls = cls.substr(3, cls.length); // now cls = 'fadeUP'

Then you can also add class using javascript like this

document.querySelector('.way-animate').classList.add(cls);

OR, if you want to select all classes starting with something like fx-, you can do it with css also like this

[class^="fx-"] {
    /* Your css styles */   
}

AND/OR, if you use jQuery, there is build in function for to add & remove class: addClass & removeClass

$(selector).addClass('className');
$(selector).removeClass('className');

try this:

var prefix = "fx-";
var suffix  = "fadeUp";
var strClass = prefix+suffix;
$("h1").addClass(strClass);

With JQuery, you could use the addClass function:

// locate element
var h1el = $('h1.way-animate');

// add css class
h1el.addClass('another-class');

Ref.: https://api.jquery.com/addClass/

I assume you want to replace any fx-* class with the other portion of the class.

First we get the list of classes of H1, then we loop and when we find a match we just do whatever we like.
Well if you want to keep it, you just remove the removeClass line of my code.

var classList = $('h1').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item.includes('fx-')) {
        $("h1").removeClass (item);
        var newclass=item.replace(/fx-/gi, "");
        $("h1").addClass(newclass);
    }
});

[UPDATED] You can Have a look here : https://jsfiddle.net/k86oqwn9/1/