Get rid of or substitute any unnecessary information at the beginning of the `class` name

I am receiving style information from the backend, but it includes an unwanted prefix. I need to remove this prefix and keep only the necessary styling. Can you suggest the correct approach?

This is the current style code I am obtaining:

<style>
043BF83A8FB24A418DA4248840101DE5 .cls_0 {
font:26px 'Arial';
color:rgb(0,0,0);
font-weight:bold;
}

043BF83A8FB24A418DA4248840101DE5 .cls_1 {
font:26px 'Arial';
color:rgb(0,0,0);
}

043BF83A8FB24A418DA4248840101DE5 .cls_11 {
font:13px 'Arial';
color:rgb(0,0,0);
}

043BF83A8FB24A418DA4248840101DE5 .cls_12 {
font:16px 'Arial';
color:rgb(0,0,0);
font-weight:bold;
}

043BF83A8FB24A418DA4248840101DE5 .cls_13 {
font:16px 'Arial';
color:rgb(0,0,0);
}
</style>

This is the expected style code:

<style>
.cls_0 {
font:26px 'Arial';
color:rgb(0,0,0);
font-weight:bold;
}

 .cls_1 {
font:26px 'Arial';
color:rgb(0,0,0);
}

.cls_11 {
font:13px 'Arial';
color:rgb(0,0,0);
}

.cls_12 {
font:16px 'Arial';
color:rgb(0,0,0);
font-weight:bold;
}

.cls_13 {
font:16px 'Arial';
color:rgb(0,0,0);
}
</style>

My attempt, which is not successful:

var styleText = $('style').get(1).html();
console.log(styleText); //throws error "Uncaught TypeError: undefined is not a function"
jquerycssregex

Answer №1

Check out this awesome solution :

$('style').html(function(_,h){
  return h.replace(/^\w+ (\.\w+)/gm,'$1');
});

This code snippet removes any text at the beginning of a line that comes before a class selector inside any <style> tag.

See it in action!

Answer №2

After some investigation, it appears the prefix is in hexadecimal format. This solution should work effectively:

str.regexReplace(/^[A-F0-9]+\s+/gm, '')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a responsive <tr> table with <td> cells

Struggling to create a scrolling table with CSS? When using overflow-y : auto, the <td> tag becomes overloaded in the <tr> element. Take a look at the example code below to see the HTML and CSS in action: HTML CODE : <table id="check" cla ...

htmlcssscroll

Refresh the table dynamically in Django without the need to reload the entire page

Seeking assistance to update a small table with new data every 10 seconds on a Django website. The data is parsed into JSON and refreshed in the database, then displayed on the front-end. Looking for help with writing AJAX code to continuously refresh the ...

javascriptjqueryajaxdjangodjango-views

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

phphtmlcss

Sticky CSS - A guide to making aside elements fill the entire available height

How can I create a grid layout where the aside is sticky to top: 0 and fills all remaining height (e.g. 100% of height), but when scrolling down, the aside height should be changed to 100% minus the footer's height? Is it possible to achieve this with ...

csscss-positionsticky

Are RSS and Atom the Same? Challenges Encountered in Retrieving and Parsing

$.ajax({ type: 'GET', url : 'http://examplewebsite.com/feeds/items/123456.atom', dataType : 'xml', error: function(xhr) { console.log('Failed to parse feed'); }, ...

jqueryxmlajaxnode.jsrss

Tips on harnessing the power of AngularJS $scope

In need of assistance! I have a paragraph and a counter that I want to update whenever the user clicks on the paragraph, all using AngularJS. Below is the code snippet I've come up with: <!DOCTYPE html> <html> <head> <script src= ...

javascriptjqueryangularjs

Remove identical options from the dropdown menu

After hard-coding and adding items to the dropdown list for team size, such as 1, 2, 3, I am encountering an issue when loading it for editing or updating. Duplicate values are appearing in the list: 1 1 2 3 4... How can I remove these duplicate value ...

phpjavascriptjqueryhtml

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

htmlcssborder

"Uncaught ReferenceError: $ is not defined - $function()" error in JavaScript/jQuery

When attempting to execute a JavaScript/jQuery function, an error is encountered when using Firebug: $ is not defined $(function()". The issue arises from the placement of the JavaScript code within a file named core.js that is referenced by index.php. W ...

javascriptjquery

I'm struggling to interpret the reply received from $.ajax

Looking to make adjustments to my existing code in order to add comments for images that are fetched using $.ajax and returned as html. The plan is to retrieve the comments as a JSON object, and then parse the previously obtained HTML to insert the commen ...

jsonjquery

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...

javascriptjquerycss

Navigate to the following slide by clicking on BxSlider

Looking to enhance the navigation on my slideshow by using the slide itself as a next button, instead of relying on traditional prev/next controls. Although it seems like a simple feature to implement, I'm struggling to make it work. This is my curre ...

javascriptjquerysliderbxslider

What is the best way to remove an active class by clicking in my specific situation?

I was working on creating a gallery of Unsplash images that would display a full-screen image when the user clicked on a small image. I implemented a modal window that should appear when the user clicks on the small image, and I wanted it to close when the ...

javascriptcssreactjsonclickmodal-dialog

Bizarrely rapid transitions from standard to hovering appearance in CSS

After creating a custom styled button with a hover effect, I noticed an issue where if you happen to hover over a specific spot on the button, it quickly switches between its normal and hover states. https://i.sstatic.net/uPq1F.gif This is my code: but ...

htmlcss

Tips for extracting information from a JSON array using AJAX

I have created a code to retrieve specific data fields such as FirstName, CompanyName, Designation, PersonalEmail, and PersonalWebsite from a database using PHP and MySQL. Here is the code snippet: while ($row = mysqli_fetch_array($q ...

jqueryjsonajax

What is the secret to the lightning speed at which this tag is being appended to the DOM?

Have a look at this concise sandbox that mirrors the code provided below: import React, { useState, useEffect } from "react"; import "./styles.css"; export default function App() { let [tag, setTag] = useState(null); function chan ...

javascripthtmlcssreactjs

Consistency in table cell formatting

What is the best way to ensure all my table cells have a consistent height and width, regardless of their content? I am working on a crossword puzzle game where some cells are empty, some contain letters as the user fills in words, and others display butt ...

css

Skip the first one and find the highest height using jQuery's each() method

I am perplexed by the fact that my first .fullrow div seems to be skipped in a WordPress/Advanced Custom Field (repeater) loop. Despite not setting any index, the issue persists as other single-row setups are functioning correctly. I am at a loss as to why ...

jquery

Header image misalignment

Seeking a solution to have the image fill up the remaining space in the .container class I attempted setting the width of the image in CSS to width: 100%, but encountered two different results: Image with attribute set: https://ibb.co/9yKJgvF If I remove ...

htmlcss

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

javascriptjqueryhtmlcss