剥离CSS类名并放入数组

时间:2014-01-08 23:49:47

标签: javascript

我有啊HTML文件。 CSS位于文档的开头,在标记内。我需要获取位于注释标记之间的那些类的类名

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

我需要将类名放入数组

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

我无法真正使用任何服务器端脚本,而且几乎只限于基本的JS。我认为我需要某种正则表达式,但这超出了我的能力范围。需要一些帮助。

1 个答案:

答案 0 :(得分:1)

也许这会比Regex更好,因为你不会解析字符串,并获得浏览器解释的实际规则。

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有工作演示。