[JavaScript] Получить список идентификаторов и селекторов доступных из CSS на странице

Допустим, есть большой CSS-файл из которого необходимо получить список всех объявленных идентификаторов и классов. При чем, селекторы могут быть какие-угодно (разумеется, в рамках стандартов).

Можно написать свой парсер CSS, но это долго, не благодарно и все равно что-то не будет учтено. По-любому есть что-то, что уже решает нужную задачу. Да, такое есть и это браузер (внезапно). Он берет CSS-файлы, загруженные на странице и парсит из них правила, привязываясь к селекторам (и отделяя селектор от правил). Результат складывается в document.styleSheets. К этому объекту можно без проблем «достучаться» через JS. Перебираем все доступные элементы styleSheets, выбираем из них селекторы, распарсиваем оставляя только то, что нужно. Пример того, как это можно сделать (запускать в консоли браузера):

var a = document.styleSheets,
	w = [];
for (var d in a) {
	for (var k in a[d].rules) {
		if (a[d].rules.hasOwnProperty(k)) {
			if (a[d].rules[k].selectorText) {
				a[d].rules[k].selectorText.split(",").forEach(function (e) {
					e.replace(/^\s\s*/, "").replace(/\s\s*$/, "").split(/\s/).forEach(function (e) {
						e.split(/(?=\.)|(?=#)|(?=\[)/).forEach(function (e) {
							if (e.indexOf(".") == 0 || e.indexOf("#") == 0) w.push(e.replace(/:.+/, ""))
						});
					});
				});
			}
		}
    }
}
w = w.filter(function (e, t, n) {
	return n.lastIndexOf(e) === t;
}).sort();
w;

Сокращенный вариант выглядит так:

var a=document.styleSheets,f="forEach",r="replace",i="indexOf",s="split",w=[];for(var d in a)for(var k in a[d].rules){if(a[d].rules.hasOwnProperty(k))if(a[d].rules[k].selectorText)a[d].rules[k].selectorText[s](",")[f](function(e){e[r](/^\s\s*/,"")[r](/\s\s*$/,"")[s](/\s/)[f](function(e){e[s](/(?=\.)|(?=#)|(?=\[)/)[f](function(e){if(e[i](".")==0||e[i]("#")==0)w.push(e[r](/:.+/,""))})})})}w=w.filter(function(e,t,n){return n.lastIndexOf(e)===t}).sort();w;

В консоли будет выведен список id-шников и классов. Работоспособность проверялась в Google Chrome.

Небольшое ограничение: если таблица стилей подгружается с другого домена, то данные из нее не попадут в document.styleSheets. Можно попробовать открыть vk.com или stackoverflow.com и в консоли выполнить приведенный выше код — вернется пустой массив.

Зачем оно вообще может понадобиться? Например, в таких вопросах — ссылка. То есть, делаем локальную страничку, в ней подключаем css-файл библиотеки и выполняем в консоли код. Получится ответ на вопрос по ссылке 🙂

Оставить комментарий

Top ↑ | Main page | Back