javascript - 新手/初级 Javascript 请求

Question

HTML代码:

<td>
<img src="../images/items/333.png"><br>
<b>Product One</b><br>
(2 in stock)<br>
<i>65 USD</i><br>
<form action="shopping.php?shop=1&amp;item=333&amp;price=65&amp;buy=conf&amp;type=" method="post">
<input name="" value="Buy this item" type="submit">
</form></td>

<td>
<img src="../images/items/444.png"><br>
<b>Product Two</b><br>
(4 in stock)<br>
<i>5 USD</i><br>
<form action="shopping.php?shop=1&amp;item=444&amp;price=5&amp;buy=conf&amp;type=" method="post">
<input name="" value="Buy" type="submit">
</form></td>

这是我正在处理的页面上的html代码，不能更改html代码。
页面上有几个 td 标签，其中包含您在上面的代码中看到的以下信息。

我想写一个脚本来做这样的事情:

if (document.body.innerHTML.indexOf("Product One") > -1) {
document.location = "shopping.php?shop=1&item="+itemID+"&price="+USD+"&buy=conf&type="
}

在页面的body/td中搜索我脚本中指定的“Product Name”，如果找到，则转到包含需要提取的变量的url，itemID和USD。
< br/>

itemID是从image.png的s​​rc中取数字提取出来的。例如 ../images/items/444.png 的 itemID是 444。

USD 是从斜体标签之间定义的价格中提取的。例如，美元的提取值 <i>5 USD</i>将是 5。

捕获是

我需要很多 if (document.body.innerHTML.indexOf("Name") > -1) {document.location = "shopping.php?shop=1&item="+itemID+"&price="+USD+"&buy=conf&type="}以满足我指定的大量产品。我可能想指定“产品一到百”和“子产品 A 到 Z”

解决方案

我想到的一些处理方法(需要放入 javascript 代码中)是:

1. 将我将指定的产品列表放入一个数组(类似于)var list = new Array ("Product One","Product Two","Sub-Product A");并有一个功能检查页面上是否存在该数组中显示在页面上的任何产品。
2. 找到产品后，要获取 itemID，请隔离 .png 之前的数字在 /items/ 之后来自产品的图像 src。并获得美元，获得 <i> </i> 之间的值(value)标签，只取数值
3. 为此，我认为 nextSibling或 previousSibing可以使用，但我不太确定。
4. 或者，为了更容易，可以有一个函数来立即定位表单的操作值并设置 window.location自 <form action="shopping.php?shop=1&amp;item=444&amp;price=5&amp;buy=conf&amp;type=" method="post">
5. 我在使用 XPath 之前见过这种做法吗？

Answer 1

这使用 jQuery 并不难——尤其是当我们将其扩展为搜索不区分大小写的正则表达式时。

以下脚本应该使用问题中的 HTML 结构，如果它准确无误并且不是由 AJAX 添加的。请注意正则表达式在定位产品描述时的威力。

您可以see the underlying code at work at jsFiddle .

// ==UserScript==
// @name     _Auto-follow targeted product links.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

var targetList  = [
    "Shoes, pumps",
    "Horse shoes",
    "(?:Red|Pink|Burgundy)\\s+shoes?"
];

/*--- Extend jQuery with a case-insensitive version of contains().
    Also allows regular expressions.
*/
jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        //--- The next is faster than jQuery(a).text()...
        var sText   = (a.textContent || a.innerText || "");     

        var zRegExp = new RegExp (m[3], 'i');

        return zRegExp.test (sText);
    }
);

$.each (targetList, function (index, value) { 
    var jqSelector          = 'td > b:containsCI("' + value + '")';
    var productFound        = $(jqSelector);
    if (productFound.length) {
        var matchingForm    = productFound.first ().nextAll ("form");
        if (matchingForm.length) {
            alert (productFound.text () );
            document.location   = matchingForm.attr ("action");
        }
    }
} );