Question

HTML code：

<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&amp;item="+itemID+"&amp;price="+USD+"&amp;buy=conf&amp;type="
}

在页面的body / td中搜索我的脚本中指定的“产品名称”，然后如果找到，请转到包含需要提取的变量的url，itemID和USD。 BR />

itemID 是通过取数字从image.png的src中提取的。例如，../images/items/444.png的itemID为444.

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

Catch是

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

解决方案

我想到的一些方法（需要加入javascript代码）是：

将我将指定的产品列表放入一个数组（例如）var list = new Array ("Product One","Product Two","Sub-Product A");，并有一个函数检查页面中是否存在该页面上显示的任何产品。
找到产品后，要获取itemID，请从产品的图片src中隔离.png之前和/items/之后的数字。要获得美元，请获取<i> </i>标记之间的值，并仅获取数值
要做到这一点，我认为可以使用nextSibling或previousSibing，但我对此不太了解。
或者，为了方便起见，可以使用函数立即找到表单的操作值，并设置window.location以后<form action="shopping.php?shop=1&item=444&price=5&buy=conf&type=" method="post">
我在使用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");
        }
    }
} );

Answer 2

这是一个不依赖于jQuery等外部库的解决方案：

function findProducts(referenceList) {  
  var productsOnPage = {}, listMatches = {},
      tds = document.getElementsByTagName("TD"),
      bold, form, i, productName, productUrl;

  // build an index of products on the page (HTML scraping)
  for (i = 0; i < tds.length; i++) {
    bold = tds[i].getElementsByTagName("B")[0];
    form = tds[i].getElementsByTagName("FORM")[0];

    if (bold && form) {
      productName = bold.innerHTML.toLowerCase();
      productUrl  = form.action;

      productsOnPage[productName] = productUrl;
    }
  }

  // match reference list against all available products on the page
  for (i = 0; i < referenceList.length; i++) {
    productName = referenceList[i].toLowerCase();
    productUrl  = productsOnPage[productName];

    listMatches[productName] = productUrl;
  }

  return listMatches;
}

称之为：

var availableProducts = findProducts(["Product One","Product Two","Sub-Product A"]);

之后你会有一个对象availableProducts看起来像这样：

{
  "product one": "shopping.php?shop=1&item=333&price=65&buy=conf&type=",
  "product two": "shopping.php?shop=1&item=444&price=5&buy=conf&type=",
  "sub-product a": undefined
}

请注意，所有键都是小写，以使字符串比较一致。要查找产品，您可以使用

function navigateIfAvailable(productName) {
  var url = availableProducts[productName.toLowerCase()];

  if (url) document.location = url;
}

现在

navigateIfAvailable("Product Two");

会去某个地方。或者不是。

新手/初学者Javascript请求

HTML code：

我想编写一个类似这样的脚本：

Catch是

解决方案

2 个答案: