# Using Chrome’s XPath with jQuery

**Date:** 2014-02-01  
**Author:** Kees C. Bakker  
**Categories:** JavaScript, jQuery  
**Original:** https://keestalkstech.com/using-chromes-xpath-with-jquery/

![Detail photo of chrome on a car.](https://keestalkstech.com/wp-content/uploads/2014/02/clem-onojeghuo-Xg8teremqDc-unsplash.jpg)

---

While working with the Chrome Developer Tool, I've discovered that you can retrieve the XPath of a selected node. It'll return something like: `//*[@id="top"]/div[1]/div[1]`.

![](https://keestalkstech.com/wp-content/uploads/2014/02/2014-02-01_1346.png)
*XPath can be copied from Chrome's Developer Tool.*

Lately, I've been working on Chrome extension [CHash Thunder](https://chrome.google.com/webstore/detail/chash-thunder-a-cloudhash/ijchocjegeadbhfecmnpehcmpinlfong). Its aim is to update *parts* of the CloudHashing.com interface to provide the use with more information. Chrome's XPath feature is very handy, because it allows me to just store a bunch of JavaScript variables with XPath references to the user interface. If they'll every change the UI, I'll update those variables.

```js
var TOP_MENU = '//*[@id="header"]/div/div/div[2]/div/div[1]/ul';
var INVESTMENT_BOX = '//*[@id="content"]/div/div[1]/div[3]/div[2]';
var LAST_ROUND = '//*[@id="content"]/div/table/tbody/tr[1]/td[1]';
var LAST_ROUND_DATE = '//*[@id="content"]/div/table/tbody/tr[1]/td[3]';
var BTC_BALANCE = '//*[@id="header"]/div/div/div[2]/div/div[1]/ul/li[3]';
```

The `$x` function can be used to get the element node.

```js
var element = $x(TOP_MENU);
```

But... it only works in Chrome. So what about other browsers? What about jQuery? What about querying documents that resulted from an AJAX request?

To solve these problems, I've created a simple parser that will convert the XPath into a jQuery selector using regular expression parsing:

```js
function $xp(xPath, $scope) {
    var selector = convertXPath(xPath);
    return $(selector, $scope);
}

function convertXPath(x) {

    //parse //*
    x = replace(x, '//\\*', '');

    //parse id
    x = replace(x, '\\[@id="([^"]*)"\\]', '#$1');

    //parse [1]
    x = replace(x, '\\[1\\]', ':first');

    //parse [n]
    x = replace(x, '\\[([0-9]+)\\]', ':eq($1)');

    //parse :eq's and lower 1
    var z = x.split(':eq(');
    x = z[0];
    if (z.length > 1) {
        for (var i = 1; i < z.length; i++) {
            var end = z[i].indexOf(')');
            var number = parseInt(z[i].substr(0, end)) - 1;
            x = x + ':eq(' + number + z[i].substr(end);
        }
    }

    //parse /
    x = replace(x, '/', ' > ');

    return x;
}

function replace(txt, r, w) {
 var re = new RegExp(r, "g");
 return txt.replace(re, w);
}
```

Here is an example that uses `$xp` to get the text of a hyperlink from an AJAX result:

```js
var FIRST_RECORD_LINK = '//*[@id="rso"]/li[1]/div/h3/a';

$.ajax({
    type: "POST",
    url: '/Test.aspx',
    success: function (data, textStatus, request) {

        var $d = $('<div>').html(data);
        var $a = $xp(FIRST_RECORD_LINK, $d);
        alert($a.text());
    }
});
```

## Improvements

2015-04-01: Chrome has a *Copy CSS Path* option. This expression can be used by jQuery without any problems.