Remove class names from CSS and store them in an array

I have a specific HTML file where the CSS is included at the beginning of the document, enclosed within comment tags. My task is to extract the names of the classes located between these comment tags.

/* target >> */
.oneClass { ... }
.anotherOne { ... }    
/* target << */

My goal is to gather these class names and store them in an array.

var myArray = new Array("oneClass","anotherOne " ...);

Unfortunately, I am unable to utilize server-side scripting and must work with basic JS only. It seems like regular expressions might be the way to go, but this is not my area of expertise. Any assistance would be greatly appreciated.

javascript

Answer №1

You may find this approach more effective compared to using Regex as it allows you to interpret the rules directly in the browser without parsing the string.

var targetStyles = ((document.getElementsByTagName('style')[0].innerText).split('/* target >> */')[1]).split('/* target << */')[0];

var dimp = window.document.implementation.createHTMLDocument('');
var styleEl = dimp.createElement('style');
styleEl.innerHTML = targetStyles;
dimp.head.appendChild(styleEl);

var myArray = [], i, length = styleEl.sheet.rules.length;

for (i=0; i<length; i++) {
    myArray.push(styleEl.sheet.rules[i].selectorText);
}

//myArray now contains the desired content.

Click here for a demo on JSFiddle.

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

Make sure two elements are siblings in JavaScript / jQuery

Looking at the HTML structure below: <div class="wrap"> <div id="a"></div> <div id="b"></div> </div> A statement is presented as false: ($('#a').parent() == $('#b').parent()); //=> false ...

javascriptjqueryparentsiblings

Leveraging three.js for visualizing temporal data series

What is the best approach for using time series data to control the animation of a three.js scene? For instance: Time | ObjA(x,y,z) | ObjB(x,y,z) | ... 00:00:00 | 0,9,0 | 1,1,1 | ... 00:00:10 | 0.1,0,0.1 | 1,0.5,1 | ... 00:0 ...

javascriptopengl-esthree.jswebgl

VueJS and Vite: Encountering an unexpected character '�' while attempting to import files that are not JavaScript. Keep in mind that plugins are required for importing such files

I'm puzzled by the error message I'm receiving: [commonjs--resolver] Unexpected character '�' (Note that you need plugins to import files that are not JavaScript) file: /..../..../WebProjects/..../ProjectName/node_modules/fsevents/fse ...

javascriptvue.jsfsevents

Mongoose encounters an issue: MissingSchemaError is thrown because the Schema has not been registered for the model

Encountering a perplexing error that I can't seem to resolve. I HAVE NAMED THE REF EXACTLY AS THE MODEL: MissingSchemaError: Schema hasn't been registered for model "ParticipantStatus". Here are the models in question: ParticipantStatus model: c ...

javascriptnode.jsmongodbmongoose

Node and Angular Error: The specified file or directory does not exist

I have been using the tutorial from scotch.io to build my first node and angular application. I encountered a common issue with relative paths online resulting in the error message Error: ENOENT: no such file or directory. However, after following the tuto ...

javascriptangularjsnode.js

Nodeca's js-yaml now allows appending '>-' to handle extended strings with ease

With the npm package js-yaml, I am attempting to work with a .yaml file. Although I can manipulate it successfully, I encounter an issue when trying to save a long string. Actual: abvs_adas: >- c2Rhc2Rhc2Rhc2Rhc2RwaW9qbGtkZ2hqbGtzZGhmZ2psaGFzamh ...

javascriptnode.jsnpmyaml

Example: Utilizing data transfer from model to directive

I have a question regarding a specific part in an example from Thinkster. I believe my confusion is due to my limited understanding of JavaScript and AngularJS fundamentals. I've been teaching myself since December, starting with the basics of JavaScr ...

javascriptangularjs

Getting started with jquery plugins: installation and usage

I have some questions as a beginner. Firstly, I'm interested in obtaining this plugin: Unfortunately, I am having difficulty downloading it and seem to be stuck in a loop. Can someone guide me on the exact steps to download it? Secondly, how do I go ...

javascriptjquerypluginsjquery-plugins

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...

javascripthtmlvariables

What is preventing the factory from gaining access to the controller?

I have set up a notification factory and passed it inside the controller. However, when I try to assign the factory to the scope within the controller, I am encountering an error. alertsManager MyApp.factory('alertsManager', function() { ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router

Is it secure to store information that impacts component rendering within a JWT payload?

I am currently developing a MERN app where users have various roles, and different components are rendered based on their role in React. In my application, I store a JWT containing the user's ID and role in a cookie, which is then decoded in a global ...

javascriptnode.jsreactjsjwtmern

The two-word string is failing to pass through the query string

I've been working on passing multiple values through the query string. So far, I have successfully passed single-word values to a PHP page using jQuery. However, I encountered an issue when trying to pass a user's name like "Vishal Deb" as it onl ...

javascriptjqueryquery-string

Best method for distributing components across nextjs zones?

Scenario: I am currently working on a project using Next.js and taking advantage of its multi zones feature. This feature allows us to run multiple independent NextJS applications as a unified app, managed by different teams. The Issue: One challenge I fa ...

javascriptreactjsnext.jsmicro-frontend

Optimizing shadow rendering in Three.js for top-notch performance

I've been working on a Minecraft project using Three.js, but I've run into some performance issues specifically when rendering shadows. If you'd like to check out the demo, you can find it here: You'll notice that the FPS drops below ...

javascriptthree.jsshadow

The template failed to load on AngularJS post-compilation

Following the build of my Angular app, I encountered this error message: [$compile:tpload] Failed to load template: app/app.html (HTTP status: 404 Not Found). Seeking assistance from you all!!!!! app.html <div class="root"> <div ui-view> ...

javascriptangularjsfrontend

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

javascripthtmlcssreactjsmaterial-ui

Angular Unit Testing: Executing Multiple expectGET's within a Singular Test

I am facing an issue with a unit test that fails to read the JSON in the second request properly This is my implementation of the Config factory (function() { 'use strict'; angular.module('commercial.factories').factory(&apos ...

javascriptangularjsjsonunit-testingkarma-jasmine

Tips for efficiently combining mergeMap observables and providing a singular value for the entire observable

Consider this particular case involving TypeScript/angular with rxjs 6.5: main(){ const items = ['session', 'user']; const source: Observable<any> = from(items); source .pipe( ...

javascriptangulartypescriptrxjs

I'm having trouble getting Grunt Source Maps to function properly within the foundation-press theme

I'm struggling to enable source maps for the npm package grunt-sass. Here's a snippet from my Gruntfile.js: The issue lies in this line: sourceMap: true, at line 13 module.exports = function(grunt) { var jsApp = [ 'js/app.js' ...

javascriptnode.jsgruntjsnpmzurb-foundation

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

javascripthtmlcss