Strip CSS class names and put in an array

Question

I have ah HTML file. CSS is at the beginning of the document, within tags. I need to get the class names of those classes that are located between comment tags

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

I need to put the class names into an array

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

I can not really use anything server side scripting and is pretty much limited to basic JS. I assume I need some sort of regex, but this is way outside of my competency. Need some help.

Bah, it'll be ugly...basically need to get the script element, regex out that info (or sift thru it) — tymeJV
– tymeJV, Commented Jan 8, 2014 at 23:54

joseeight · Accepted Answer · 2014-01-09 00:24:17Z

1

Maybe this will work, better than Regex since you won't be parsing the string, and get the actual rules interpreted by the browser.

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 contains what you are looking for.

JSFiddle with working demo.

answered Jan 9, 2014 at 0:24

joseeight

9247 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Strip CSS class names and put in an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related