從html提取信息greasemonkey

Question

因此，我正在嘗試編寫一個greasemonkey腳本，以便在我的網絡遊戲中放置拼貼。我已經知道了拼貼拼貼，但爲了擴展腳本，我需要將循環限制爲移動次數。我想不通，從頁面的HTML中提取此信息的最佳方式：我只是在尋找如何解決此獸指針

<h2>5</h2>Level:<font size="4px" color="red"> 1455</font><br><br>Moves:<font size="4px" color="red"> 0</font><br>Total:<font size="4px" color="red"> 688</font><br><br><a href="logout.php"> 

。正則表達式？

編輯：對於這個div完整的代碼

<div id="info"> 



<img src="images/mmosbg_title.png" onclick = "getinfo('boardinfo.php', 'info')"; height="48" width="138" border="0"><br><br><a href="board5.php?size=5&border=0"><img src="boxes/990000.gif" border="0" width="5 px" height="5 px" onmouseover="Tip('Micro Board Size', BGCOLOR, '#FFCC00', WIDTH, -200, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><a href="board5.php?size=10&border=0"><img src="boxes/990000.gif" border="0" width="10 px" height="10 px" onmouseover="Tip('Small Board Size', BGCOLOR, '#FFCC00', WIDTH, -200, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><a href="board5.php?size=16"><img src="boxes/990000.gif" border="0" width="16 px" height="16 px" onmouseover="Tip('Medium Board Size', BGCOLOR, '#FFCC00', WIDTH, -200, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><a href="board5.php?size=32"><img src="boxes/990000.gif" border="0" width="32 px" height="32 px" onmouseover="Tip('Large Board Size', BGCOLOR, '#FFCC00', WIDTH, -200, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><h2>5</h2>Level:<font size="4px" color="red"> 1455</font><br><br>Moves:<font size="4px" color="red"> 0</font><br>Total:<font size="4px" color="red"> 688</font><br><br><a href="logout.php"><img src="images/logout.png" border="0" onmouseover="Tip('Logout', BGCOLOR, '#FFCC00', WIDTH, -200, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><a href="history.php"><img src="images/pastwinners.png" border="0" onmouseover="Tip('Past Winners', BGCOLOR, '#FFCC00', WIDTH, -200, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><br><br><font color="red" font="5px">Current Rankings</font><img src="images/questionsmall.png" onmouseover="Tip('Current Rankings<br>(rank)(name)(total)(moves)', BGCOLOR, '#FFCC00', WIDTH, -300, OPACITY, 95, SHADOW, true, SHADOWWIDTH, 7)" onmouseout="UnTip()"></a><br><br><font color="red">1530</font> of 1600 (96 %)<br><br>1 <font color="red">iannis5</font> <font color="red">795</font> <font color="black">292</font><br><img src="boxes/0000CD.gif" width="16" height="16" ><br>2 <font color="black">5</font> <font color="red">688</font> <font color="black">0</font><br><img src="boxes/990000.gif" width="16" height="16" ><br>3 <font color="darkred">yellowfestiva5</font> <font color="red">47</font> <font color="black">6</font><br><img src="boxes/FFDAB9.gif" width="16" height="16" ><br> 
</div> 

這是醜陋的，我知道。

Answer 1

該問題的HTML看起來可疑畸形和不完整。什麼是包含所有的節點？

總之，從HTML差提取信息，您可以用鈍力正則表達式的快速和骯髒的解決方案：

var moves  = 0; 

var movesMatch = document.body.textContent.match (/Moves:\s*(\d+)(?:\D)/); 
if (movesMatch && movesMatch.length > 1) { 
    moves  = parseInt (movesMatch[1], 10); 
} 
console.log ("The number of moves left is: ", moves); 

而這可能會在這種情況下工作，但它的脆性（可能「找到「錯誤的信息），除了最簡單的頁面。

---

的最佳工藝是與DOM技術，儘可能縮小文本：

1. 確定獨特且耐用的節點，如果可能的話，那最好包含所需信息或者是以穩定的方式靠近它。

   尋找id屬性（最好）或class名稱（好）或屬性（可以）。你想獲得一個好的「CSS路徑」來獲得所需的信息。這可以輸入到querySelector或jQuery。請注意，Firebug會給你一個原始的CSS路徑，你可以用它作爲開始。

   例如，對於像這樣的HTML：

   <div id="dress-sizes"> 
       <ul> 
        <li> 
         <span class="dSize" data-color="green">13</span> 
        </li> 
        <li> 
         <span class="dSize" data-color="green">8</span> 
        </li> 
       </ul> 
   </div> 
   

   一個很好的選擇，找到綠色衣服的尺寸是：

   "#dress-sizes ul li span.dSize[data-color='green']" 
   

2. 沒有找到一個很好的CSS路徑，您可能不得不退出XPath（螢火蟲或Chrome會給你）。但是我只有那一次

3. 一旦你找到了一個很好的方法來選擇確切的節點（理想的），父節點或可靠的兄弟節點;您將擁有更少（或不）額外的垃圾郵件來過濾RegEx。這減少了錯誤命中的可能性。

---

在這種情況下，由於只有唯一十歲上下節點是註銷鏈接<a href="logout.php">。這看起來很耐用。也就是說，當網站被修改時，改變的可能性不大。但可能有多個註銷鏈接。

所以鍵控關閉該節點，這是我們可以迄今爲止給出的HTML做到最好：

var anchorNode = document.querySelector ("a[href='logout.php']"); 
var siblingText = anchorNode.parentNode.textContent; 
var moves  = 0; 

var movesMatch = siblingText.match (/Moves:\s*(\d+)(?:\D)/); 
if (movesMatch && movesMatch.length > 1) { 
    moves  = parseInt (movesMatch[1], 10); 
} 
console.log ("The number of moves left is: ", moves); 

---

---

更新：現在，容器是已知的，並很好有一個id，使用：

var containerNode = document.querySelector ("#info"); 
var siblingText  = containerNode.textContent; 
var moves   = 0; 

var movesMatch  = siblingText.match (/Moves:\s*(\d+)(?:\D)/); 
if (movesMatch && movesMatch.length > 1) { 
    moves   = parseInt (movesMatch[1], 10); 
} 
console.log ("The number of moves left is: ", moves);