Converting A Full CSS Selector To XPath Using ColdFusion

Posted March 13, 2009 at 6:51 PM by Ben Nadel

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).">
  •  
  • <!--- Define arguments. --->
  • <cfargument
  • name="Selector"
  • type="string"
  • required="true"
  • hint="I am the full CSS selector."
  • />
  •  
  • <!--- Define the local scope. --->
  • <cfset var LOCAL = {} />
  •  
  • <!--- Remove all extra white space. --->
  • <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
  • ) />
  •  
  •  
  • <!--- Create an array of XPath selection parts. --->
  • <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#">
  •  
  • <!--- Trim this selection part. --->
  • <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 ">")>
  •  
  • <!--- Add child tag XPath selector. --->
  • <cfset ArrayAppend(
  • LOCAL.XPathParts,
  • "/"
  • ) />
  •  
  • <cfelseif (LOCAL.SelectorPart EQ "")>
  •  
  • <!--- Add decendant XPath selector. --->
  • <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<br />
  • #CSSSelectorToXPath( "div" )#<br />
  • <br />
  •  
  • div p<br />
  • #CSSSelectorToXPath( "div p" )#<br />
  • <br />
  •  
  • div p strong<br />
  • #CSSSelectorToXPath( "div p strong" )#<br />
  • <br />
  •  
  • ##data-form label<br />
  • #CSSSelectorToXPath( "##data-form label" )#<br />
  • <br />
  •  
  • div > p<br />
  • #CSSSelectorToXPath( "div > p" )#<br />
  • <br />
  •  
  • div p.stanza > strong<br />
  • #CSSSelectorToXPath( "div p.stanza > strong" )#<br />
  •  
  • </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.




Reader Comments

Rick O
Mar 13, 2009 at 11:37 PM // reply »
153 Comments
277 Points

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 // reply »
11,243 Comments
75,390 Points

@Rick,

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


Ben Nadel
Mar 16, 2009 at 8:42 AM // reply »
11,243 Comments
75,390 Points

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


Post A Comment

Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.

Please review the following issues:

Author Name:
Author Email:
Author Website:
Comment:
Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Hitesh Agja
May 23, 2013 at 3:55 AM
Javascript Array Methods: Unshift(), Shift(), Push(), And Pop()
very interesting and helpful too. ... read »
Joel
May 22, 2013 at 5:35 PM
Script Tags, jQuery, And Html(), Text() And Contents()
This is still an issue 2 years later. jQuery is supposed to remediate these cross browser issues, no? I have been unable to find any statement from the jQuery team calling this behavior "by de ... read »
Phillip Senn
May 22, 2013 at 12:44 PM
Ask Ben: Query Loop Inside CFScript Tags
In cf10, if you call a function that has: local.result = {}; local.result.msg = ""; local.svc = new query(); local.svc.setSQL("SELECT * FROM..."); local.obj = local.svc.exe ... read »
Dan G. Switzer, II
May 22, 2013 at 12:29 PM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Ben: What version of Java are you using? Also, did you test users.id to see what Java reports as the data type? I wonder if it's not a Java primitive data type, but getting returned as something ... read »
Ben Nadel
May 22, 2013 at 11:47 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Dana, Awesome - so it looks like this bug was fixed in ColdFusion 10. Thanks so much for double-checking that. ... read »
DanaK
May 22, 2013 at 11:37 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
When I c&p and run on cf10, I get: Selected User IDs: 1,4 User 1 selected: YES - YES User 2 selected: NO - NO User 3 selected: NO - NO User 4 selected: YES - YES User 5 selected: NO - ... read »
Ben Nadel
May 22, 2013 at 11:27 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
@Tom, Good thought, but no dice. Both of these still exhibit the same behavior: users.id[ users.currentRow ] users[ "id" ][ users.currentRow ] It's just something whacky happening with ... read »
Tom Eldredge
May 22, 2013 at 11:07 AM
Strange Interaction Between DeserializeJson(), ArrayContains(), And Database Values In ColdFusion
Could your problem be that "users.id" is actually an ARRAY, not a single value? Perhaps try it again with "users.id[1]" (I only have CF8 here at work). ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools