Парсинг селекторов
 

Привет всем. Написал регу для раскладки селектора по частям

var scanSelector = prompt("Enter selector: ", '#cssplay > ns|a.p1:active .p4 img[src=".png\\\\"], a|ns[rel="te\\"]st\\\\"]:not(div[test="name"])'),

	rega = /\s*(?:(\*|(?:(?:\*|[\w\-]+)\|)?[\w\-]+))?(?:\[\s*(?:((?:[\w\-]+\|)?[\w\-]+)\s*((?:~|\^|\$|\*|\|)?=)\s*)?((?:".*?(?:(?:[\\]{2}(?="))|[^\\])"|'.*?(?:(?:[\\]{2}(?='))|[^\\])'|[^"'].*?)?)\s*\])?(?:(\.|#)([\w\-]+))?(?:(:(?::)?)([\w\-]+)(?:\(\s*([^\s,]+)\s*\))?)?(?:(?:\s*(?=\s))?(?:(?:\s(?=,|>|\+|~))?([\s,>+~](?!$)))?)?/g,

	nm = [
		"Fragment: ",
		"Tag name: ",
		"Attribute name: ",
		"Condition type: ",
		"Attribute name/value: ",
		"Id or Class prefix: ",
		"Id or Class name: ",
		"Pseudo type: ",
		"Pseudo name: ",
		"Pseudo content: ",
		"Next search type: "
	],
	m = null, s = "CSS Selector: " + scanSelector + "\n\n",
	lastIndex = 0;

rega.lastIndex = 0;

do {
	lastIndex = rega.lastIndex;

	m = rega.exec( scanSelector );

	for(var i = 0; i < m.length; i++ ) {
		s += nm[ i ] + "'" + m[ i ] + "'\n";
	}
	s += "\n";

} while( ( lastIndex < rega.lastIndex ) && ( rega.lastIndex < scanSelector.length ) );

alert( s );

Помогите найти какой нить необычный селектор, который эта рега просто не захочет скушать.

СПС

#cssplay > a.p1:active .p4 img[src=.png][name=xxx]

Pavel M.,
Спасибо, данный селектор принимается нормуль.

P.S. Признаюсь честно даже не пробовал подобный вбивать, но как не удивительно, норм его принимает.

Не понимает пространства имен:
ns:tag[attr:name=123]

B~Vladi,
хм... в спецификации о них я что-то не видел текста... Если не затруднит, ткните меня в данный раздел плиз... Но подумаю над этим.

Спасибо большое!

А нашел в спецификации, да вы правы есть такое, что-то упустил я их

devote, регу по именам тегов и имен/значений атрибутов можешь взять тут.

#cssplay > a.p1:active .p4 img[src=".png\\"]

Attribute name/value: 'src=".png\\"'

C этой проблемой я столкнулся когда делал свои селекторы.

А вы пробовали вбить подобный селектор в querySelectorAll он ее тоже не принимает

Это не то! Пространства имен по спецификации в селекторах пишется похоже через знак '|' вот можете посмотреть http://www.w3.org/TR/css3-selectors/#w3cselgrammar

devote,

<a rel="a\\">lalala</a>

<script>
var a = prompt("C'on!", '');
alert(document.querySelectorAll(a).length)
</script>

Вводить a[rel="a\\\\"]

B@rmaley.e><e,
не спорю что слешов нужно побольше что бы приняло... да я в курсе что с этим траблы

B@rmaley.e><e,
Если не сложно, поясни в спецификации я верно понял что namespaces используется через знак '|' или я что-то там не понял?

Ну вообще да, это я перепутал.

devote, судя по примерам в сети и спецификации, да.

Поправил регу на первой странице, вроде все ваши замечания исправил.

если не работает в нативном браузере это не значит что он работает верно.

Да парсер не плох. ток вот самый прикол начнется когда начнете реализовывать поиск...

Без этого никак, понятно дело что время покажет... а вообще данная рега давно встроена в движок моей библиотеки, сюда выложил его только для того что бы узнать/найти где что я упустил. Понятно дело что сам я все не смогу протестировать. Но тем не менее спасибо всем тем кто попытался найти недочеты и тем кто их нашел.

Позволю себе поднять тему. Хотел спросить, какие селекторы вы используете чаще всего в своих проектах?

#
.
<tagname>
:hover
:first-child

Зачем это в js?Валидные css3.

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

Речь о проектах в целом, нет?)

Я так понимаю, человек не пишет движок CSS.

Человек спросил - я ответил) Греха в этом особого не вижу)

нет, просто спросил к тому чтобы оптимизировать свой движок в ИЕ на тех моментах которые чаще требуются, так как для новых браузеров как правило используется внутренний querySelectorAll а вот для ИЕ увы нужен собственный.

Уже написан, и не собираюсь делать Sizzle хотя фильтры так же можно расширять, уж сам принцип просто движка таков. Как я уже упоминал где-то из топиков, мой селектор работае в среднем в полтора/два раза быстрее чем Sizzle с другими библиотеками вообще сравнивать не хочу. Ибо они не делают важного в конце с элементами. Не сортируют их, тоесть по тому порядку в котором они находятся в DOM

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

Выложу, позжа немного

Ок, спасибо.

devote,
Подавилась этим:

/\s*(?:(\*|(?:(?:\*|[\w\-]+)\|)?[\w\-]+))?(?:\[\s*(?:((?:[\w\-]+\|)?[\w\-]+)\s*((?:~|\^|\$|\*|\|)?=)\s*)?((?:".*?(?:(?:[\\]{2}(?="))|[^\\])"|'.*?(?:(?:[\\]{2}(?='))|[^\\])'|[^"'].*?)?)\s*\])?(?:(\.|#)([\w\-]+))?(?:(:(?::)?)([\w\-]+)(?:\(\s*([^\s,]+)\s*\))?)?(?:(?:\s*(?=\s))?(?:(?:\s(?=,|>|\+|~))?([\s,>+~](?!$)))?)?/g.exec('div.vasea[aaaa="tttt"]')

Да нет, только что создал элемент с классом sasea и атрибутом aaaa прогнал через свой селектор, и она нормально нашла нужный элемент.

/^(\.|#)[a-z0-9-]+$/i. Другие варианты скорее как исключение, например, по имени тега 'input', по наличию атрибута '[placeholder]'.

Только по имени класса, иногда каскад из двух классов.

а ты все компоненты расшариваешь на весь проект? Нету компонентов, специфичных для страницы?

А какая разница? Во-первых, компоненты, специфичные для страницы всё равно не должны никому мешать на этой странице. Во-вторых, сегодня компонент специфичный, завтра -- уже нет. Ну и в-третьих, вместо того, чтобы нагружать мозг лишней работой и решать, специфичный ли компонент, лучше считать, что все компоненты должны быть контекстно-независимыми.

ну во-первых не засоряется "глобальное пространство имен", во-вторых, я не говорил, что специфичные компоненты должны мешать кому-то на этой странице, в-третьих, не понимаю как связана специфичность компонента с контексто-независимостью. По-крайней мере я не предлагал делать его зависящим от контекста.

а как ты поступаешь с контентом который изначально генерируется статически, а потом к нему надо добавить js-функциональность? Например, текстовое поле, выпадающий список для которого подгружается через ajax. Либо, например, кроссбраузерная поддержка атрибута placeholder. По идее, твои компоненты предполагают, что при создании они создают html-код, а не привязываются к существующему.

Я извиняюсь, что встреваю в ваш разговор, но всё же хочу сказать, что я уже давно говорил (и не только тут) об одном удачном подходе, даже начал писать фреймворк.
Предлагаю привязываться к пространствам имен (использование кастомных тегов и атрибутов, xhtml). Никто никому не мешает и все счастливы :)

Спасибо, продолжайте :write:

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

Давай тогда определимся: чем специфичный компонент может отличаться от расшаренного компонента.

Проблема не понятна.

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

речь об unobtrusive javascript подходе. Сначала мы делаем, чтобы работало без js. Например, форма. А потом надо добавить к текстовому полю выпадающий список и надо завернуть это текстовое поле в span. Можно либо 1) заменить поле на новую html-разметку, либо 2) то же самое, но сохранить это поле и вставить его в середину этой html-разметки.

Что такое область видимости для компонента? CSS, например, в любом случае будет глобальным, его не спрятать.

Подход устарел. Пользователей без JS исчезающе мало, гораздо меньше, чем пользователей IE6, например. Значительно усложнять разработку ради гиков с noscript-ом смысла нет.