Converting A Full CSS Selector To XPath Using ColdFusion

By Ben Nadel on March 13, 2009

Tags: ColdFusion

Now that we have a ColdFusion user defined function that converts a single element CSS selector to XPath, we can build on that foundation to convert a full CSS selector to XPath. Really, this is a rather small jump; all we have to do is handle the element delimiters and our previous UDF will take care of the heavy lifting. When it comes to descendent selection in CSS, I am only going to support two different kinds at this time:

space = Any descendent selector
> = Direct descendent selector (child)

I know that CSS can handle more than that (depending on the browser), but since we are keeping things simple for now, I am only going to think about these two common types. In terms of XPath syntax, these two relationships are quite easy to map:

space ==> // (any descendent)
> ==> / (direct descendent)

Ok so, keeping in mind that I have already defined the CSSElementSelectorToXPath() UDF, I am now defining the CSSSelectorToXPath() that builds on top of that to convert a full CSS selector to an XPath selector:

<cffunction
name="CSSSelectorToXPath"
access="public"
returntype="string"
output="false"
hint="I convert a full CSS selector to XPath (ex. div.header p span).">
<cfargument
name="Selector"
type="string"
required="true"
hint="I am the full CSS selector."
/>
<cfset var LOCAL = {} />
<cfset LOCAL.Selector = Trim(
REReplace(
ARGUMENTS.Selector,
"\s+",
" ",
"all"
)
) />
<!---
We are going to handle three different kinds of selection
delimiters:
[ ] = decendent
[>] = child
[,] = OR'ing two full selectors together.
Because we have three delimiters that mean different
things, we cannot treat this as a list. Rather, what we
need to do is capture all elements of the selector.
--->
<cfset LOCAL.SelectorParts = REMatch(
"(\s*>\s*)|(\s*,\s*)|(\s+)|([^\s,>]+)",
ARGUMENTS.Selector
) />
<cfset LOCAL.XPathParts = [] />
<!---
Start off by adding an "anywhere" selector to the
XPath parts. This is because our CSS selector might
match anywhere within the XHTML document.
--->
<cfset LOCAL.XPathParts[ 1 ] = "//" />
<!---
Now, let's loop over the parts of the CSS selector and
convert those to their XPath equivalent.
--->
<cfloop
index="LOCAL.SelectorPart"
array="#LOCAL.SelectorParts#">
<cfset LOCAL.SelectorPart = Trim( LOCAL.SelectorPart ) />
<!---
Check to see if we have a direct decendent
delimiter. If so, we simply need to add a slash
to the XPath parts.
--->
<cfif (LOCAL.SelectorPart EQ ">")>
<cfset ArrayAppend(
LOCAL.XPathParts,
"/"
) />
<cfelseif (LOCAL.SelectorPart EQ "")>
<cfset ArrayAppend(
LOCAL.XPathParts,
"//"
) />
<cfelseif (LOCAL.SelectorPart EQ ",")>
<!---
Add OR XPath selector. Because we are beginng a
new selector, prepend the "anywhere" selector.
--->
<cfset ArrayAppend(
LOCAL.XPathParts,
"|//"
) />
<cfelse>
<!---
We have an actual element selector. Convert
this to XPath syntax and add it to the XPath
parts array.
--->
<cfset ArrayAppend(
LOCAL.XPathParts,
CSSElementSelectorToXPath( LOCAL.SelectorPart )
) />
</cfif>
</cfloop>
<!---
Now that we have our XPath parts array, all we need to
do is join it to form our full XPath selection query.
--->
<cfreturn ArrayToList( LOCAL.XPathParts, "" ) />
</cffunction>

As you can see, not much going on here - we are basically replacing the delimiters using the above rules and passing off the element translation to our previous UDF. Because CSS selectors don't have an initial context, I am prepending "//" to the final XPath selection. This will allow our XPath selection to make its first match anywhere within the given XHTML document.

To test this, I set up the following code:

<cfoutput>
div
#CSSSelectorToXPath( "div" )#
div p
#CSSSelectorToXPath( "div p" )#
div p strong
#CSSSelectorToXPath( "div p strong" )#
##data-form label
#CSSSelectorToXPath( "##data-form label" )#
div > p
#CSSSelectorToXPath( "div > p" )#
div p.stanza > strong
#CSSSelectorToXPath( "div p.stanza > strong" )#
</cfoutput>

And, when we run the above test code, we get the following output:

div
//div

div p
//div//p

div p strong
//div//p//strong

#data-form label
//*[ @id = "data-form" ) ]//label

div > p
//div/p

div p.stanza > strong
//div//p[ contains( @class, "stanza" ) ]/strong

The full CSS selectors are getting converted to proper XPath syntax. So far so good, now on to the next step.

Tweet This Great article by @BenNadel - Converting A Full CSS Selector To XPath Using ColdFusion Woot woot — you rock the party that rocks the body!

Reader Comments

Rick O Mar 13, 2009 at 11:37 PM

153 Comments

I would be remiss in my duties if I didn't point out that you should talk like a pirate and use → instead of ==> .

Ben Nadel Mar 15, 2009 at 6:52 PM

13,930 Comments

@Rick,

Ha ha, I actually know what you're referring to :)

Ben Nadel Mar 16, 2009 at 8:42 AM

13,930 Comments

NOTE: I have updated the UDF above to handle the "or" selector (,).

Oh my chickens, this post is old!

Hit me up on Twitter if you want to discuss it further.