Fetch data from inside a div

[sid78669]

I have the following HTML in a webpage that I want to mine for data:

<td id="topdisplay" class="menu-item">
	<div class="bg">
		<a href="/game.php?village=55303&screen=ranking">Ranking</a>
		<div class="rank">
		   (4<span class="grey">.</span>120.|2<span class="grey">.</span>124 P)
		</div>
		<table class="menu_column" cellspacing="0">
	</div>
</td>

I want to get the data inside the rank class and get the numbers, in this case 4120|2124 P. I tried to do this:

var point = document.getElementById("topdisplay");
alert(point.innerHTML);
end();

I received this:

<div class="bg">
	<a href="/game.php?village=55303&amp;screen=ranking">Ranking</a>
	<div class="rank">
		(4<span class="grey">.</span>120.|2<span class="grey">.</span>124 P)
	</div>
	<table class="menu_column" cellspacing="0">
		<tbody>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=ally">Tribes</a>
				</td>
			</tr>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=player">Player</a>
				</td>
			</tr>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=con_ally">Continent Tribes</a>
				</td>
			</tr>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=con_player">Continent Players</a>
				</td>
			</tr>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=kill_ally">Opponents defeated tribal ranking</a>
				</td>
			</tr>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=kill_player">Opponents defeated</a>
				</td>
			</tr>
			<tr>
				<td class="menu-column-item">
					<a href="/game.php?village=55303&amp;screen=ranking&amp;mode=awards">Awards</a>
				</td>
			</tr>
			<tr>
				<td class="bottom">
					<div class="corner">
					</div>
					<div class="decoration">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</div>

How can I filter the data here? I just want to extract the numbers from the first DIV class.

[sid78669]

Update:

I have been able to do the following:

javascript:

	var troopcount =  0;

	var parentDiv = document.getElementById("topdisplay");
	var parentDivHTML = parentDiv.innerHTML.valueOf();
	
	var divStart = parentDivHTML.indexOf("<div class=\"rank\">");
	var divEnd = parentDivHTML.indexOf("</div>", divStart);
	var wantedTag = parentDivHTML.substring(divStart, divEnd);
	alert("Looking for:\n" + wantedTag);

This gives me:

Looking for:
<div class="rank">(4<span class="grey">.</span>112.|2<span class="grey">.</span>130 P)

I think I can cleanse it up a bit more on my own now.

[sid78669]

This is what I was finally able to do:

var parentDiv = document.getElementById("topdisplay");
			var parentDivHTML = parentDiv.innerHTML.valueOf();
			
			var divStart = parentDivHTML.indexOf("<div class=\"rank\">");
			var divEnd = parentDivHTML.indexOf("</div>", divStart);
			var wantedTag = parentDivHTML.substring(divStart, divEnd).replace("<div class=\"rank\">", "");
			wantedTag = wantedTag.replace("<span class=\"grey\">.</span>", "");
			wantedTag = wantedTag.replace("<span class=\"grey\">.</span>", "");
			points = parseInt(wantedTag.substring(wantedTag.indexOf("|") + 1, wantedTag.indexOf(" ")));
			//alert("Looking for:\n" + wantedTag + "\nTo Get:\n" + points);