Changing HTML With Greasemonkey

问题

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>

回答1:

So 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/

回答2:

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'

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

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

来源：https://stackoverflow.com/questions/6686070/changing-html-with-greasemonkey

标签

javascript

html

greasemonkey