extract info from html greasemonkey

Question

The question HTML looks suspiciously malformed and incomplete. What is the containing node for all that?

Anyway, for extracting info from poor HTML, you can use blunt-force regex for a quick and dirty solution:

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

And that may work in this case, but it's brittle (likely to "find" the wrong information) for all but the simplest pages.

The best process is to narrow down the text as much as possible with DOM techniques:

Identify unique and durable nodes, if possible, that ideally contain the desired information or are near it in a stable way.

Look for id attributes (best), or class names (good), or attributes (can be okay). You want to get a good "CSS path" to the desired information. This can be fed to querySelector or jQuery. Note that Firebug will give you a raw CSS path, which you can use as a start.

For example, for HTML like this:
```
<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>
```
a good selector to find the size of the green dress would be:
```
"#dress-sizes ul li span.dSize[data-color='green']"
```
Failing to find a good CSS path, you may have to fall back on the XPath (which firebug or Chrome will give you). But I've only had to that one time
Once you've found a good way to select the exact node (ideal), or the parent node, or a reliable sibling node; You will have much less (or no) extra cruft to filter with RegEx. This reduces the likelihood of false hits.

In this case, the only unique-ish node given is the logout link <a href="logout.php">. This looks to be durable. That is, it's unlikely to change much when the site gets modified. But there may be more than one logout link.

So keying off that node, this is the best we can do with the HTML given so far:

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

Update: Now that the container is known, and it nicely has an id, use:

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