How To Add Prefix in Class's Name Using JavaScript

Question

Hi All I am new in JavaScript. I have one HTML file. And I need to add some word in the class's name. Is there any way to do it using JavaScript?

For Example

<!Doctype HTML>
<html>
    <head>
        <style>
            .heading{color:red;}   
            .text{color:red;}   
        </style>
    </head>
    <body>
        <h1 class="heading">This is heading.</h1>
        <p class="text">This is my text.</p>
    </body>
</html>

In need to add "test-" in the class name in head and body both using JavaScript.

After using JavaScript function it should look like this.

<!Doctype HTML>
<html>
    <head>
        <style>
            .test-heading{color:red;}   
            .test-text{color:red;}   
        </style>
    </head>
    <body>
        <h1 class="test-heading">This is heading.</h1>
        <p class="test-text">This is my text.</p>
    </body>
</html>

It would be great help! Thanks in advance.

Why don't you simply rename the classes in the file? If you must change the selectors, please see https://stackoverflow.com/a/17454470/1169519 — Teemu, Sep 18 '17 at 11:26
Hi, welcome to SO. If you have written code for this that you can't get to work, then you have come to the right place. Just [edit your question](https://stackoverflow.com/posts/46278135/edit) and add the relevant parts of your code into it, because without that we cannot help. Please see [ask]. — Peter B, Sep 18 '17 at 11:37

score 0 · Answer 1 · 2017-09-18T11:37:37.567

//$(".heading").addClass('test-heading').removeClass('heading');

//$(".text").addClass('test-text').removeClass('text')

$('.text').attr('class', function() {
    return $(this).attr('class').replace('text', 'test-text');
});

$('.heading').attr('class', function() {
    return $(this).attr('class').replace('heading', 'test-heading');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
    <head>
        <style>
            .heading{color:red;}   
            .text{color:red;}   
        </style>
    </head>
    <body>
        <h1 class="heading">This is heading.</h1>
        <p class="text">This is my text.</p>
    </body>
</html>

This doesn't answer the question at all, OP wants to manipulate the stylesheet. — Teemu, Sep 18 '17 at 11:33

score 0 · Answer 2 · answered Sep 18 '17 at 11:37

0

You can loop Inside the body and add new class.

$("body").children().each(function(index, element) {
  var oldclass = $(this).attr('class');
  var newClass = "test_" + oldclass
  $(this).removeClass(oldclass).addClass(newClass);

});

.test_heading {
  color: blue;
}

.test_text {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <style>
    .heading {
      color: red;
    }
    
    .text {
      color: red;
    }
  </style>
</head>

<body>
  <h1 class="heading">This is heading.</h1>
  <p class="text">This is my text.</p>
</body>

</html>

answered Sep 18 '17 at 11:37

4b0

21,981
30
95
142

This will only update one class if the element has multiple classes – TechGirl Sep 18 '17 at 11:40
Op didn't say there is multiple class.There are so many way to do this. – 4b0 Sep 18 '17 at 11:44
This doesn't answer the question at all, OP wants to manipulate the stylesheet. – Teemu Sep 18 '17 at 11:47
The code I put that was example. I need to use some kind of function using JavaScript. So every class can have the "text-" prefix. I need to do this because. I need to preview my HTML portfolio in modal. And it is clashing with the page CSS. That is why I need to change the class name in the HTML. Like gmail does when it gets the email in their account. – Pratik Gupta Sep 18 '17 at 11:54
So you can loop and change your class when you load your html in modal instead of change on document.ready ? – 4b0 Sep 18 '17 at 12:02

score 0 · Answer 3 · answered Sep 18 '17 at 11:39

0

Find all classes of any element, loop through it, add new class and remove existing classes

var element = "body";
var className= "test-";
var classes = $(element).attr('class').split(" ");
classes.forEach(function(i,obj){
 $(element).addClass(className + i);
 $(element).removeClass(i);
});

answered Sep 18 '17 at 11:39

TechGirl

478
2
12

This doesn't answer the question at all, OP wants to manipulate the stylesheet. – Teemu Sep 18 '17 at 11:47
Nope, it is just changin class names of some elements. – Teemu Sep 18 '17 at 12:02
You cannot rename a class, you can instead add/remove the classes. OP wants to add a prefex, and it will work just fine. @Teemu – TechGirl Sep 18 '17 at 12:04
Ofcourse I can. Reading the code in the post clearly shows, that the stylesheet is also changed. I've to admit, that probably it is not what they actually need, though = ). – Teemu Sep 18 '17 at 12:06

How To Add Prefix in Class's Name Using JavaScript

3 Answers3