使用Greasemonkey更改HTML

Question

使用Greasemonkey更改HTML

5

我一直在寻找一种方法来更改网站上的HTML，我的主要问题是它没有ID标签，我无法使用它来提取和更改它，我想使用Greasemonkey JavaScript。

抱歉，我忘记了一部分。我正在将当前获胜者记录在服务器上，并尝试使用Greasemonkey通过JavaScript在游戏网站上显示上次获胜时间。

以下是源代码的一部分，在下面的示例中，我想在<b>标签之间Raiton旁边添加当前时间。

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

- winsock

这是否意味着您无法访问HTML代码本身，但可以添加JavaScript文件？如果您可以使用span标签将可编辑部分包围起来，则这很简单。 - Brian Hoover

你能否将它用 div 包裹起来，像这样：<div id='timeId'><b>Raiton</b></div><br> 然后在 JavaScript 中使用 GetelementById()。 - Icemanind

为什么不在要更改的元素上添加一个ID属性呢？ - phlogratos

首先，将属性值用双引号括起来，并关闭没有值的元素，例如br => <br />。 - Pezhvak IMV

6个回答

3

请关注这个主题：MozillaZine:使用Greasemonkey进行简单文本替换

http://forums.mozillazine.org/viewtopic.php?f=19&t=907475

步骤如下：

document.body.innerHTML= document.body.innerHTML.replace(/original/g,"new");

您需要使用 \ 符号转义特殊字符，例如 / 和 "。

- Smeterlink

1

将要更改的文本包装在<div>标签中，然后通过其id查找div对象。然后更改对象的innerHTML成员。

HTML:

<div id='some_id'>A value</div>

JavaScript：

var my_div = document.getElementById('some_id')
my_div.innerHTML = 'Some other value'

- Barry Fruitman

1

将jQuery引入你的GM脚本中（之后你会感激自己）。

在元数据块中添加以下这行代码：

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

那么这个脚本将会按照你的要求执行：

var bElem = $ ("b:contains('Raiton')");
bElem.text (bElem.text() + new Date() )

在 jsFiddle 上查看演示。

- Brock Adams

0

你可以创建一个元素来更新你代码的一部分：

另外请谷歌一下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>

而在 JavaScript 中：

document.getElementById('time_handler').innerHTML = '11:23';

- Pezhvak IMV

<br>这个标签是垃圾 - <br>在HTML5中是完全有效的。无论如何，你为什么认为OP正在编写HTML5呢？ - Matt Ball

@Mat Ball：感谢您的评论，我所说的是基于（W3C验证器）[http://validator.w3.org/#validate_by_input+with_options]，如果有其他建议，将不胜感激。 - Pezhvak IMV

0

当标记以提供'钩子'的方式编写时，Javascript的效果最佳。由于您实际上只有自由浮动的文本，因此没有好的方法来识别要插入文本的特定位置。

如果您控制源代码，则似乎添加一些带有ID和类的<p>标签等是一个好主意，以使您的生活更轻松。

- idrumgood

他（可能）无法控制该页面的源代码。这是一个Greasemonkey应用程序。 - Brock Adams

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Ball · Accepted Answer

到目前为止，我还没有看到任何直接回答问题的答案。试试这个：

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

示例: http://jsfiddle.net/mattball/Nvwmd/