从 htmlgreasemonkey 中提取信息

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（firebug 或 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);