Question

我有一个HTML页面，我想在绿色/红色中突出显示OK / Error一词这可能是“动态”使用简单的javascript片段，例如搜索＆amp;更换？

我的样本：

<html>
    <head>
        <title></title>

    </head>
    <body>
    OK - Test1 Passed!<br>
    OK - Test2 Passed!<br>
    Error - Test3 Failed <br>

    Some More Text...
    </body>

</html>

这不起作用，但我想的是：

<script type="text/javascript"> 
document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>");
</script>

应该做神奇的事。

我发现的所有突出显示或着色示例都太复杂了。希望你能以一种简单的方式解决我的问题。

Answer 1

Document.body.replace是一个繁重的功能。你必须改用标签。

<html>
<head>
    <title></title>

</head>
 <style>
  .passed{background-color:green}
</style>
<body>
<span class="passed">OK</span> - Test1 Passed!<br>
<span class="passed">OK</span> - Test2 Passed! <br>
Error - Test3 Failed <br>

Some More Text...
</body>
</html>

或者通过js添加课程。这将是更有效的方式。

Answer 2

你错过了一个结束括号：

document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>"));

此外，字体标记已弃用，您应将样式属性的值括在引号中：

document.write(document.body.replace('OK', '<span style="background-color:green">OK</span>'));

Answer 3

font元素已弃用多年。请改用span。

您可以将文本包装在span元素中，然后根据JavaScript更改其样式。

<span id="label1">OK</span>

我建议使用jQuery，因为它对你有用。例如，设置元素的css属性很简单，如下所示：

$("#label1").css("background-color", "red");

当然，此代码必须放在script标记内或页面中包含的.js文件中。

Answer 4

如果您想有效地执行此操作，则需要将突出显示的文本放在元素中。这样您就可以通过DOM轻松访问这些单词。

拿这个，例如：

<html>
    <head>
        <title></title>

    </head>
    <body>
    <p id="test1"><span class="status">OK</span> - Test1 <span class="result">Passed!</span></p>
    <p id="test2"><span class="status">OK</span> - Test2 <span class="result">Passed!</span></p>
    <p id="test3"><span class="status">Error</span> - Test3 <span class="result">Failed</span></p>

    Some More Text...
        <script type="text/javascript">
            var test1Status = document.getElementById('test1').firstChild;
            var test1Result = document.getElementById('test1').lastChild;

             test1Status.style.color = 'green';
             test1Result.innerHTML = "Passsssed";

        </script>
    </body>
</html>

这使您可以访问测试状态（“确定”或“错误”），颜色以及状态响应（“通过”或“失败”）。显然，您不想在JavaScript中对ID进行硬编码，但您宁愿通过函数传递ID。

但是，这应该有助于您理解为什么要以这种方式使用DOM元素。您拥有更好的控制权，并且您的脚本更加灵活。

Answer 5

这是一个基本的JavaScript，可以按照您的要求执行：

var body = document.getElementsByTagName('body')[0].innerHTML;
body = body.replace(/OK/g, "<span style=\"color: red; background-color:green\">OK</span>")
document.getElementsByTagName('body')[0].innerHTML = body;

jsFiddle示例

Answer 6

这是我的解决方案。单击按钮：）

    <html>
<head>
<title></title>
<script type="text/javascript">
    function replaceAll(txt, replace, with_this) {
        return txt.replace(new RegExp(replace, 'g'), with_this);
    }
</script>
</head>
<body>
    OK - Test1 Passed!
    <br> OK - Test2 Passed!
    <br> Error - Test3 Failed
    <br> Some More Text...

    <input type=button
        onclick='document.body.innerHTML = replaceAll(document.body.innerText,"OK","ro.demostene :)")'
        name="Click" />

</body>

</html>

如何使用Javascript更改HTML页面中字符串的颜色

6 个答案: