Javascript: Use Xpath In JQuery

March 30, 2023 Post a Comment

I have, for example, the next XPath query: //div[span='something']/parent::div/child::div[@class=\'someClass\'] I want to use this XPath query in JavaScript: return $('a:contains(

Solution 1:

You could add the results of an existing XPath evaluation to a jQuery selection, I threw together this jquery extension that seems does it all for you.

Example usage:

$(document).xpathEvaluate('//body/div').remove()

Here's the add-in.

$.fn.xpathEvaluate = function (xpathExpression) {
   // NOTE: vars not declared local for debug purposes
   $this = this.first(); // Don't make me deal with multiples before coffee

   // Evaluate xpath and retrieve matching nodes
   xpathResult = this[0].evaluate(xpathExpression, this[0], null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

   result = [];
   while (elem = xpathResult.iterateNext()) {
      result.push(elem);
   }

   $result = jQuery([]).pushStack( result );
   return $result;
}

Solution 2:

You can re-write your xpath queries as CSS selectors:

$('div:has(> div > span:contains(something)) > div.someClass');

You can achieve the same effect as parent:: using the :has pseduo selector to select an element based on its children: div.foo:has(> div.bar) will select all div elements with class foo that have a child div with class bar. This is equivalent to div[@class="bar"]/parent::div[@class="foo"].

See:

You could probably approach this in several other ways using various combinations jQuery's DOM traversal methods. For example, this would be a very direct translation of your xpath query:

$('div:has(> span:contains(something))')  // //div[span="something"]
    .parent('div')                        // /parent::div
    .children('div.someClass');           // /child::div[@class="someClass"]

It's worth noting that div.someClass in CSS isn't the exact equivalent of div[@class="someClass"] in xpath. The CSS will match <div class='foo someClass bar'>, but the xpath won't. See Brian Suda's article on parsing microformats with XSLT for more detail.

Solution 3:

As the co-author of Wicked Good XPath, I certainly recommend it for cross browser XPath support (on HTML documents, you can try using it with XML documents but the support is incomplete).

We welcome any sort of correctness test / performance benchmark on our library. During development, the library has been tested on IE 7 through 10 plus the Android 2.2 browser which doesn't have native XPath support.

Solution 4:

if you want to select an element inside an iframe, from parent window, you should change second parameter of evaulate() function to iframe's document element, like :

var iFrameDocument = $('iframe#myPage').get(0).contentWindow.document;
xpathResult = this[0].evaluate(xpathExpression, iFrameDocument, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);

Solution 5:

There is no Cross-browser implementation as far as I know. There is a xpath plugin for jQuery which says is still in developement.

Other than that there is a Google-authored pure JavaScript implementation of the DOM Level 3 XPath specification called wicked-good-xpath which is good.

JavaScript Sample