jXpathjQuery 獲取唯一 Xpath 的擴(kuò)展插件

jXpath

一個(gè)獲取頁(yè)面某元素在此頁(yè)面上“唯一xpath”的jQuery插件。

緣由

使用python開發(fā)一個(gè)爬蟲項(xiàng)目，一開始用的bs4，發(fā)現(xiàn)bs4中對(duì)同一級(jí)別的元素支持很差，無(wú)論xpath還是css選擇器都不太好弄。
后來(lái)選擇使用py lxml + xpath，畢竟這是最佳之選。可能是我尋找能力有問(wèn)題，沒有找到成熟的獲取xpath的插件，或者找到的不太符合自己的需求。
比如Google chrome的F12、還有一個(gè)js插件（網(wǎng)絡(luò)來(lái)源，已忘記出處），所以打算自己寫一個(gè)，自己比較喜歡jQuery，就寫了個(gè)簡(jiǎn)單的。

特別處

• 可使用任意屬性獲?。ㄅc元素高亮沖突）

• 指定id/class獲取

• id/class共存

• 對(duì)于有些不規(guī)范的源碼中table不包含tbody元素 而頁(yè)面自動(dòng)添加tbody元素的兼容

• 自動(dòng)獲取元素在xpath規(guī)范下的index，比如

    //body/div[id="content"]/div[2]

插件方法

• 獲取xpath：getXpath
  參數(shù)

var defaults = {
    keepTbodys: false,    // 保留tbody與否
    isHightLight: true,    //  元素高亮
    mode: "id&class"  // any / id / class / id&class   /
    // 模式 any為任意屬,與元素高亮沖突
    // 模式 id ，只元素自己或父元素有id且頁(yè)面唯一才停止
    // 模式 class ，只元素自己或父元素有class且頁(yè)面唯一才停止
    // 模式 id&class，可以是id_class等。。只要包含id/class就行，id和class只要唯一就停止搜索
};

• 獲取元素的xpath index：getXpathIndex
  無(wú)參

使用范例

var path = $(selector).jQueryGetXpath("getXpath", {
    keepTbodys: true,
    mode: 'id_class',
    isHightLight: true
    });

• 為了防止點(diǎn)擊鏈接跳轉(zhuǎn)等事件，可以對(duì)a標(biāo)簽取消跳轉(zhuǎn)、所有jquery的點(diǎn)擊事件都可以進(jìn)行屏蔽等操作

$('body *').unbind("click");$('body *').click(function (event) {
    var path = $(this).jQueryGetXpath("getXpath", {
        keepTbodys: false,
        mode: 'id_class',
        isHightLight: true
    });
    alert(path);() + 20);
    event.stopPropagation(); // 阻止冒泡
    return false;//阻斷后續(xù)事件});

使用js驗(yàn)證xpath正確性（可能會(huì)出現(xiàn)不一致，但是xpath是正確的）

var path = $(selector).jQueryGetXpath("getXpath", {
    keepTbodys: true,
    mode: "idclass"});var headings = document.evaluate(path, document, null, XPathResult.ANY_TYPE, null);var thisHeading = headings.iterateNext();var xpathText = "";while (thisHeading) {
    xpathText += thisHeading.textContent + "\n";
    thisHeading = headings.iterateNext();}var jQueryText = $(selector).text();if (xpathText.trim() === jQueryText.trim()) {
    alert("校驗(yàn)通過(guò)：\n" + xpathText.trim());}else {
    alert("校驗(yàn)未通過(guò)：\n xpath:\n" + xpathText + "\n" + "jQuery:\n" + jQueryText);}