Converting A Single CSS Element Selector To XPath Using ColdFusion
Posted March 13, 2009 at 4:09 PM by Ben Nadel
I wanted to explore the idea of converting natural CSS to XPath selectors for use in merging CSS with XHTML content. I don't think the concept is very complicated, but it does seem to have a bunch of little, moving parts. So, rather than solve all the problems at one time, I thought it would be good to break it down and start with the smallest problem first and then build on that to eventually convert natural CSS to XPath.
So, the smallest problem that I can see is converting a single element selector into XPath. For example, converting:
div
... into:
div
Or, converting:
div.form
... into:
div[ contains( @class, 'form' ) ]
This doesn't get into how these are grouped when it comes to contextual selecting (ex. P within a Div tag) - that's the next level up. Let's tackle the lowest level problem first, then we can worry about how to join these together to perform more complex searches.
When it comes to viable CSS selectors, I think we are dealing with about 6 different possibilties:
- element#id
- element.class
- #id
- .class
- *.class
- *
Thanks to the finite nature of this set, we can easily match these patterns against a simple CFIF / CFELSE statement with regular expressions. And so, I have taken that idea and wrapped it up in a ColdFusion user defined function, CSSElementSelectorToXPath():
- <cffunction
- name="CSSElementSelectorToXPath"
- access="public"
- returntype="string"
- output="false"
- hint="I convert a single element selector to XPath (ex. div.header).">
-
- <!--- Define arguments. --->
- <cfargument
- name="Selector"
- type="string"
- required="true"
- hint="I am the single element selector."
- />
-
- <!--- Define the local scope. --->
- <cfset var LOCAL = {} />
-
- <!---
- Trim the selector and remove any pseudo selector
- information. While some of these can be applied
- (ex. :event), for our purposes, we are not going to
- apply them at this time.
- --->
- <cfset LOCAL.Selector = Trim(
- REReplace(
- ARGUMENTS.Selector,
- ":[^\s]*",
- "",
- "one"
- )
- ) />
-
- <!---
- Check to see what kind of pattern we have here. As far
- as CSS is concerned, we really only have six different
- selectors to care about:
-
- element#id
- element.class
- #id
- .class
- *.class
- *
- --->
- <cfif REFind( "^\w+##.+$", LOCAL.Selector )>
-
- <!--- Return ID selector. --->
- <cfreturn (
- ListFirst( LOCAL.Selector, "##" ) &
- "[ @id = """ &
- ListLast( LOCAL.Selector, "##" ) &
- """ ]"
- ) />
-
- <cfelseif REFind( "^\w+\..+$", LOCAL.Selector )>
-
- <!--- Return class selector. --->
- <cfreturn (
- ListFirst( LOCAL.Selector, "." ) &
- "[ contains( @class, """ &
- ListLast( LOCAL.Selector, "." ) &
- """ ) ]"
- ) />
-
- <cfelseif REFind( "^##.+$", LOCAL.Selector )>
-
- <!--- Return ANY ID selector. --->
- <cfreturn (
- "*[ @id = """ &
- ListLast( LOCAL.Selector, "##" ) &
- """ ) ]"
- ) />
-
- <cfelseif REFind( "^\..+$", LOCAL.Selector )>
-
- <!--- Return ANY class selector. --->
- <cfreturn (
- "*[ contains( @class, """ &
- ListLast( LOCAL.Selector, "." ) &
- """ ) ]"
- ) />
-
- <cfelseif REFind( "^\*\..+$", LOCAL.Selector )>
-
- <!--- Return ANY class selector. --->
- <cfreturn (
- "*[ contains( @class, """ &
- ListLast( LOCAL.Selector, "." ) &
- """ ) ]"
- ) />
-
- <cfelseif REFind( "^\w+$", LOCAL.Selector )>
-
- <!--- Return element selector. --->
- <cfreturn LOCAL.Selector />
-
- <cfelse>
-
- <!--- Not valid - return ANY selector. --->
- <cfreturn "*" />
-
- </cfif>
- </cffunction>
As you can see, I am stripping out any pseudo selectors before the conversion. It is true that some pseudo selectors can be used (ex. :even, :odd, :first), but for now, we'll strip them out. Really, it wouldn't be that hard to put them in; just as with the element selectors, each one would have to be mapped to a specific XPath predicate:
:first ==> [ position() = 1 ]
More on that late. Now, to test to see if the above UDF works, I am gonna run some various CSS selectors through it:
- <cfoutput>
-
- div ==>
- #CSSElementSelectorToXPath( "div" )#<br />
-
- div##data-form ==>
- #CSSElementSelectorToXPath( "div##data-form" )#<br />
-
- div.data-form ==>
- #CSSElementSelectorToXPath( "div.data-form" )#<br />
-
- ##data-form ==>
- #CSSElementSelectorToXPath( "##data-form" )#<br />
-
- .data-form ==>
- #CSSElementSelectorToXPath( ".data-form" )#<br />
-
- *.data-form ==>
- #CSSElementSelectorToXPath( "*.data-form" )#<br />
-
- </cfoutput>
When the above code, we get the following output:
div ==> div
div#data-form ==> div[ @id = "data-form" ]
div.data-form ==> div[ contains( @class, "data-form" ) ]
#data-form ==> *[ @id = "data-form" ) ]
.data-form ==> *[ contains( @class, "data-form" ) ]
*.data-form ==> *[ contains( @class, "data-form" ) ]
Looks like it's working nice. Next step will be to combine the above and create contextual selectors.
