使用JavaScript时,我想使用XPath查找字符串的存在,然后基于该字符串刷新页面

Using JavaScript, I want to use XPath to look for the presence of a string, then refresh the page based on that

本文关键字:字符串 然后 存在 刷新 于该 查找 JavaScript XPath 使用      更新时间:2023-09-26

我正在使用JavaScript与GreaseMonkey一起工作。

是否存在字符串?

当这个HTML页面加载时,我想在一个特定的地方寻找一个字符串。

具体位置:XPath: /HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/P[1]/B[1]

(包含在这个地方:<b>Newsletter Issue Date: June 20th, 2013</b>)

<标题>行动

如果字符串June 20存在,则不做任何操作。(无需行动)如果字符串'June 20 '不在,则重新加载页面。

如果你想要一些更通用的东西,那么你可以使用这样的东西。

HTML

<table>
    <tbody>
        <tr>
            <td><p><b>Newsletter Issue Date: June 10th, 2013</b></p></td>
            <td><p><b>Newsletter Issue Date: June 11th, 2013</b></p></td>
            <td><p><b>Newsletter Issue Date: June 12th, 2013</b></p></td>
        </tr>
        <tr>
            <td><p><b>Newsletter Issue Date: June 13th, 2013</b></p></td>
            <td><p><b>Newsletter Issue Date: June 24th, 2013</b></p></td>
            <td><p><b>Newsletter Issue Date: June 25th, 2013</b></p></td>
        </tr>
        <tr>
            <td><p><b>Newsletter Issue Date: June 20th, 2013</b></p></td>
            <td><p><b>Newsletter Issue Date: June 21st, 2013</b></p></td>
            <td><p><b>Newsletter Issue Date: June 22nd, 2013</b></p></td>
        </tr>
    </tbody>
</table>
Javascript

/*jslint maxerr: 50, indent: 4, browser: true */
(function () {
    "use strict";
    function walkTheDOM(node, func) {
        if (node && node.nodeType) {
            if (typeof func === "function") {
                func(node);
            }
            node = node.firstChild;
            while (node) {
                walkTheDOM(node, func);
                node = node.nextSibling;
            }
        }
    }
    function escapeRegex(string) {
        return string.replace(/['['](){}?*+'^$''.|]/g, "''$&");
    }
    function filterElementsByContains(elements, string) {
        var toStringFN = {}.toString,
            text = toStringFN.call(elements),
            result,
            length,
            i,
            element;
        if (text !== "[object NodeList]" && text !== "[object Array]" && !($() instanceof jQuery)) {
            return result;
        }
        result = [];
        if (typeof string === "string") {
            string = new RegExp("^" + escapeRegex(string) + "$");
        } else if (toStringFN.call(string) !== "[object RegExp]") {
            return result;
        }
        function getText(node) {
            if (node.nodeType === 3) {
                text += node.nodeValue;
            }
        }
        length = elements.length;
        i = 0;
        while (i < length) {
            text = "";
            element = elements[i];
            walkTheDOM(element, getText);
            if (string.test(text)) {
                result.push(element);
            }
            i += 1;
        }
        return result;
    }
    if (filterElementsByContains([document.getElementsByTagName("table")[0]], /June 20/).length) {
        alert("exists");
    }
}());
在jsfiddle

你可以在这个回答中看到其他一些使用它的例子

如果您必须将XPATH转换为CSS选择器,那么请查看此GIST

您可以将选择器翻转为css选择器,然后使用document.querySelector(selector);

var xpath = '/HTML[1]/BODY[1]/TABLE[1]/TBODY[1]/TR[3]/TD[1]/TABLE[1]/TBODY[1]/TR[1]/TD[1]/P[1]/B[1]',
    selector = xpath.replace(/'/([a-z]+)'[([0-9]+)']/gi, function(_, tag, num) {
        num--;
        return tag + ':nth-child(' + num + ')>';
    }).slice(0, -1);
var element = document.querySelector(selector);

当你得到元素时,你可以使用.innerHTML来获得指定节点的html。

var mySearch = 'June 20';
if ( element.innerHTML.indexOf(mySearch) == -1 ) {
    // the string isn't present
};
相关文章: