javascript 使用 Greasemonkey 更改 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6686070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing HTML With Greasemonkey
提问by winsock
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.
我一直在寻找一种在网站上更改 HTML 的方法，我的主要问题是它没有 id 标签，我可以使用 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.
抱歉我漏掉了那部分。我正在服务器上记录当前获胜者并尝试通过 Greasemonkey 使用 JavaScript 来显示游戏站点上的最后获胜时间。
Below is part of the source, in the example below I'd want to add the current time beside Raitonbetween the <b>tags.
下面是源代码的一部分，在下面的示例中，我想在标签之间的Raiton旁边添加当前时间<b>。
<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>
采纳答案by Matt Ball
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;
}
}
回答by Brock Adams
Introduce jQuery to your GM script (you'll be glad later).
将 jQuery 引入您的 GM 脚本（稍后您会很高兴）。
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() )
回答by Smeterlink
Follow this thread: MozillaZine: Simple Text replacement with Greasemonkey
关注此主题：MozillaZine：使用 Greasemonkey 进行简单文本替换
http://forums.mozillazine.org/viewtopic.php?f=19&t=907475
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.
您需要使用符号来转义像/和这样的特殊字符。"\
回答by Barry Fruitman
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.
将要更改的文本包装在<div>标签中，然后通过其 id 找到 div 对象。然后更改对象的innerHTML 成员。
HTML:
HTML：
<div id='some_id'>A value</div>
JavaScript:
JavaScript：
var my_div = document.getElementById('some_id')
my_div.innerHTML = 'Some other value'
回答by idrumgood
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.
当标记的编写方式为它提供“钩子”时，Javascript 工作得最好。由于您实际上只有自由浮动文本，因此没有好方法来确定要插入文本的特定位置。
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.
如果您控制源代码，那么添加一些<p>带有 ID 和类的标签等似乎是个好主意，以使您的生活更轻松。
回答by idrumgood
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 ;)
也请谷歌搜索 html5，你不使用它的条款 ;)
<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:
在 javascript 中：
document.getElementById('time_handler').innerHTML = '11:23';
