I've been searching for a way to change HTML on a website my main problem being it does not have an id tag that I can use to pull it out and change it, using Greasemonkey JavaScript.
sorry I left that part out. I am logging the current winner on a server and trying to use JavaScript via Greasemonkey to show the last winning time on the game site.
Below is part of the source, in the example below I'd want to add the current time beside Raiton between the <b> tags.
<html>
<head>
Most Recent Winner: <b>Raiton</b><br>
Entry Cost: <font color=22AA22><b>11000</b></font> (resets at Dayroll)<br>
Entry costs go up in <font color=2222AA><b>11</b></font> entries to <font color=22AA22><b>22000</b></font> Ryo<br>
Number of plays today: <font color=AA2222><b>0</b></font><br>
</body>
</html>
I've been searching for a way to change HTML on a website my main problem being it does not have an id tag that I can use to pull it out and change it, using Greasemonkey JavaScript.
sorry I left that part out. I am logging the current winner on a server and trying to use JavaScript via Greasemonkey to show the last winning time on the game site.
Below is part of the source, in the example below I'd want to add the current time beside Raiton between the <b> tags.
<html>
<head>
Most Recent Winner: <b>Raiton</b><br>
Entry Cost: <font color=22AA22><b>11000</b></font> (resets at Dayroll)<br>
Entry costs go up in <font color=2222AA><b>11</b></font> entries to <font color=22AA22><b>22000</b></font> Ryo<br>
Number of plays today: <font color=AA2222><b>0</b></font><br>
</body>
</html>
6 Answers
Reset to default 4So far, I haven't seen any answers that just answer the question. Try this:
var elts = document.getElementsByTagName('b'),
i = elts.length,
elt,
text;
while (i--)
{
elt = elts[i];
text = elt.textContent;
if (text === 'Raiton')
{
elt.textContent = text + ' ' + new Date();
break;
}
}
Demo: http://jsfiddle.net/mattball/Nvwmd/
Follow this thread: MozillaZine: Simple Text replacement with Greasemonkey
http://forums.mozillazine.org/viewtopic.php?f=19&t=907475
The scheme is the following:
document.body.innerHTML= document.body.innerHTML.replace(/original/g,"new");
You need to escape especial characters like / and " with the \ symbol.
Wrap the text you want to change in a <div> tag, then find the div object via it's id. Then change the innerHTML member of the object.
HTML:
<div id='some_id'>A value</div>
JavaScript:
var my_div = document.getElementById('some_id')
my_div.innerHTML = 'Some other value'
Introduce jQuery to your GM script (you'll be glad later).
Add this line to the metadata block:
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
Then this Script will do what you want:
var bElem = $ ("b:contains('Raiton')");
bElem.text (bElem.text() + new Date() )
See the demo at jsFiddle.
Javascript works best when the markup is written in a way that provides 'hooks' for it to get at. Since you really just have free floating text in there, there's no good way to identify the specific place you want to insert text.
If you control the source, it seems like it would be a good idea to add some <p> tags and such with IDs and classes to make your life easier.
You can create an element to use it to update part of your code:
Also please google for html5, you don't use terms of it ;)
<html>
<head>
Most Recent Winner: <b>Raiton</b><span id="time_handler">00:00</span><br> <!-- HTML5!? <br /> -->
Entry Cost: <font color=22AA22><b>11000</b></font> (resets at Dayroll)<br>
Entry costs go up in <font color=2222AA><b>11</b></font> entries to <font color=22AA22><b>22000</b></font> Ryo<br>
Number of plays today: <font color=AA2222><b>0</b></font><br>
</body>
</html>
And in javascript:
document.getElementById('time_handler').innerHTML = '11:23';
<div id='timeId'><b>Raiton</b></div><br>and then useGetelementById()in Javascript – Icemanind Commented Jul 13, 2011 at 21:46