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技术尽可能缩小文本范围：

识别唯一且持久的节点，如果可能的话，理想情况下包含所需信息或以稳定的方式靠近它。

查找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']"
```
如果找不到好的CSS路径，您可能需要回退到XPath（firebug或Chrome会给你）。但我只有那一次
一旦找到了选择确切节点（理想），父节点或可靠兄弟节点的好方法;使用RegEx进行过滤将会少得多（或没有）额外的余量。这减少了误击的可能性。

在这种情况下，唯一给出的unique-ish节点是注销链接<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);

从html greasemonkey中提取信息

1 个答案: