Парсер css на клиенте

[bio]

День добрый! Не встречал ли кто парсер css на js ? Сам найти к сожалению не смог.

Есть задача, по свойству найти селектор к которому он применяется, причём значение свойства нужно тоже достать.

 

Пример:

.selector1, .selector2 {	background: linear-gradient(top bottom,#f0f0f0 0%,#d6d6d6 100%);}.selector1:hover {	background: linear-gradient(top bottom,#d6d6d6  0%,#f0f0f0 100%);}

[

    ['.selector1','linear-gradient(top bottom,#f0f0f0 0%,#d6d6d6 100%)'],

    ['.selector2','linear-gradient(top bottom,#f0f0f0 0%,#d6d6d6 100%)'],

    ['.selector1:hover','linear-gradient(top bottom,#d6d6d6 0%,#f0f0f0 100%)']

]

[JohnDoe]

Возможно вам поможет, нечто, вроде вот этого:

(function(){	var styleData = document.styleSheets, styleGreed, greedList, styles = [],i,j;	for(i=0;i<styleData.length;i++){		styleGreed = styleData[i];		greedList = styleGreed.rules || styleGreed.cssRules;		for(j=0;j<greedList.length;j++){			styles.push(greedList[j].cssText);		}	}	this.cssStyles = styles;}).call(this);

Далее вам придется перебрать массив в поимках нужной вам комбинации слов...

Мне лично не попадались парсеры для CSS. Хотя я, лично не вижу смысла парсить css, видимо из-за этого они и не попадались. Я думаю вам наверное нужен не парсер, а скажем какое нибудь API, поскольку в результате вам наверное придется работать с тем самым CSS( ну там: менять параметры, и, все такое...). Подумайте...

[Николя223]

 на php бы... можно регулярками, а можно посимвольным считыванием

возможно посимвольным - проще. В любом случае - задача избавится от пробелов в начале и в конце...

можно и на JS извернуться.

Смотри

1) запускаем цикл и считываем каждый символ. первые пробелы и переносы строк - пропускаем. Нужно ещё и комментарии учесть . Ищем любой символ кроме комментариев, пробелов и переноса строки

Когда находим считываем все до знака "{", пропускаем через трим и заносим в массив(в дальнейшем можно и на запятые разделить)

2) Считываем все внутри {  }  отфильтровываем пробелы и разносим опять по массивам. ну ты понял) как только нашли ; (причем не окруженную ковычками)значит ок и т.д.

Задача осложнится если в коде ошибки будут

 

хотя  можно и немного иначе    

задача - преобразовать {..} в ассоциативные массивы. т.е. ; - заменить на запятые, но осторожно. в PHP ещё и двоеточия на "=>" а оставшуюся левую часть - вставляй куда угодно

Ну а поиск в массивах наверно понятен))

 

я писал парсер для CSS, но тут есть НО)) Тот код CSS изначально строился по понятному алгоритму также другой функцией)) поэтому и небыло проблемм с разбором

Если код привести к структурному виду - не будет проблемм.

1) Каждое правило с новой строки

2) Пробелов не должно быть больше одного

3) Все свойства разделяются например точка с запятой и три пробела(чтобы сплитом легко делить)

и все.   Тогда разбор будет проходить приемущественно через split()/explode()

 

JohnDoe хороший ход - правда не рациональный. не нужно перебирать всё. Но возможно - именно это может проделать пункт 1,2 и 3

Edited May 19, 2014 by Николя223

[JohnDoe]

Я не об этом...

Правильно ли поставлен вопрос.

Если брать в общем, то, для работы с CSS через JavaScript нет нужды парсить сам CSS. Большинство браузеров, и не которые IE, уже проделали всю нужную работу. Для работы со стилями необязательно распарсивать все стили. Это просто пример, в котором я собираю все стили в массив. В функции нет выборки, для этого достаточно добавить какой-нибудь банальный, к примеру:

 ...search(/\bbackground:/)

, чтобы отсеять лишнее, и потом, опять же, к примеру, вытянуть значение свойства и селектор каким нибудь:

var sometext = ...cssText.split('{'),selects = sometext.shift().split(','),value = sometext[0].match(/\bbackground: \w*;\b/);

Способов много и основная задача решена. Но после проверки содержания, кому как удобнее... можете хоть на стороне сервера распарсивать и обрабатывать

Edited May 19, 2014 by JohnDoe

[Николя223]

а я об этом))

(/\bbackground: \w*;\b/);

там искать конец нужно будет точкой с запятой и пробелом. не зря писал. ТС хочет градиенты искать, там встречаются

Я вот думаю - если ему часто нужно будет искать - нет нужды каждый раз скрипты гонять. один раз прошел, сохранил в удобном виде - например xml. и все. из  него даже js   легко данные извлекать

 

Еслиб ТС написал для какой цели это нужно, может вообще ничего парсить не придется

[Николя223]

value = sometext[0].match(/\bbackground: \w*;\b/);

не рабочая.

a.match(/background:\ .*?;\ /img);

может тогда циклом  по массиву пройтись и готовый результат сразу искать 

a[i].search(/la_la:\ la_la_la;/); 

только экранировать придется некотрые символы

а после нахождения, да можно делить на "{", а затем по запятым

Edited May 19, 2014 by Николя223

[JohnDoe]

Во первых... 

value = sometext[0].match(/\bbackground: \w*;\b/);

Рабочая. Просто браузеры в большинстве своем не просто распарсивают а раскладывают по полочкам... Свойство background содержит в себе 3, или более, свойств(background-color, background-position, background-repeat - это только для цвета). Следовательно и задавать вопросы нужно правильно...

к примеру:

sometext[0].match(/\bbackground-?\w*:\s*[^;]*;/gim)

Насколько я понимаю, основная цель форума научить или научиться... Если все будет преподноситься на тарелочке, научиться чему либо невозможно. Основная задача в программировании - думать. Думать за компьютер(он ведь не понимает человека, и то что он хочет), и думать за пользователя который пользуется твоим продуктом.

Поскольку меня понять сложно, я думаю стоит выложить более или менее адекватный(рабочий) пример скрипта:

(function(){	var styleData = document.styleSheets, styleGreed, greedList, styles = [],i,j, sometext,selects,value;	for(i=0;i<styleData.length;i++){		styleGreed = styleData[i];		greedList = styleGreed.rules || styleGreed.cssRules;		for(j=0;j<greedList.length;j++){			//styles.push(greedList[j].cssText);			if(greedList[j].cssText.search(/\bbackground/)>-1){				sometext = greedList[j].cssText.split('{');				selects = sometext.shift().split(',');				value = sometext[0].match(/\bbackground-?\w*:\s*[^;]*;/gim);				_(sometext[0].match(/\bbackground-?\w*:\s*[^;]*;/gim));				styles.push({s:selects,v:value})			}		}	}	console.log('Done');	this.cssStyles = styles;}).call(this);

В результате вы получите тот  набор, на который, рассчитывал bio.

Опять же говорю его переделать не проблема... Но и рассчитывать на то, что готовые решения будут даваться бесплатно - тоже не вариант.

Edited May 20, 2014 by JohnDoe

[Great Rash]

https://github.com/reworkcss/css-parse

[Николя223]

Рабочая

)) с градиентами не прокатит))

Зачем вообще ему на массив то раскладывать??? Как я понял он хочет просто найти нужный селектор - нет смысла матчить тогда. просто сеарч и бери не хочу нужные селекторы 

 

 

https://github.com/reworkcss/css-parse

В этом плане я с этим товарищем согласен)) 

 

основная цель форума научить или научиться... Если все будет преподноситься на тарелочке, научиться чему либо невозможно.

 

 

 

И добавлю. я вам указывал на это.

попробуйте вашей распарсить обычный градиент взятый с колорзилы.

var a = "{background: #1e5799; /* Old browsers *//* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */ }"

 

подойдет просто 

match(/background.*?;\ /img);

Edited May 20, 2014 by Николя223