3

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

ページの本文/tdでスクリプトで指定されている「製品名」を検索し、見つかった場合は、抽出する必要のある変数、itemID、およびUSDを含むURLに移動します。

itemIDは、番号を取得することにより、image.pngのsrcから抽出されます。たとえば、のitemID../images/items/444.pngは444です。

USDは、イタリックタグの間に定義された価格から抽出されます。たとえば、USDの抽出値は<i>5 USD</i>5になります。



キャッチは

私が指定する多数の製品に対応するには、多くのことが必要になります。if (document.body.innerHTML.indexOf("Name") > -1) {document.location = "shopping.php?shop=1&amp;item="+itemID+"&amp;price="+USD+"&amp;buy=conf&amp;type="}「ProductOnetoHundred」と「Sub-productAtoZ」を指定したい場合があります



解決

これを処理するために私が考えたいくつかの方法（javascriptコードに入れる必要があります）は次のとおりです。

  1. 指定する製品のリストを配列（のようなもの）に入れvar list = new Array ("Product One","Product Two","Sub-Product A");、ページに表示されるこの配列からの製品の存在についてページをチェックする関数を持たせます。
  2. 商品が見つかったら、itemIDを取得するために、商品の画像srcから.png前後の番号を分離します。/items/また、USDを取得するには、<i> </i>タグ間の値を取得し、数値のみを取得します
  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を使用する前にこれが行われるのを見たことがありますか？
4

2 に答える 2

2

これは、jQueryを使用して難しくありません。特に、大文字と小文字を区別しない正規表現を検索するようにjQueryを拡張する場合はそうです。

次のスクリプトは、正確でAJAXによって追加されていない場合、質問のHTML構造で機能するはずです。製品の説明をターゲットにするときに正規表現が与える力に注意してください。

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");
        }
    }
} );
于 2012-06-11T09:54:06.260 に答える
1

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");

どこかに行きます。か否か。

于 2012-06-11T09:53:36.323 に答える