Question

我想知道如何在我的网页中使不同的单词变成不同的颜色。 EG：“这个”会变成红色，但“盒子”会变成蓝色。

到目前为止，我有这个：

    <div class="scroll">
          <p class="margin">This box should scroll when it runs out of space.This box should                    scroll when it      runs out of space.This box should scroll when it runs                   out of space.This box should scroll when it runs        out of                  space.This box should scroll when it runs out of space.This box should scroll                   when it runs out        of space.This box should scroll when it runs                    out of space.This box should scroll when it runs out of                 space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.This box should scroll when it runs out of         space.This box                  should scroll when it runs out of space.This box should scroll when it runs out                 of      space.This box should scroll when it runs out of space.This box                 should scroll when it runs out of       space.This box should scroll                    when it runs out of space.This box should scroll when it runs out of                    space.This box should scroll when it runs out of space.This box should scroll                   when it runs out of         space.This box should scroll when it runs out                   of space.
        </p>
    </div>

编辑：

嗯，对不起。我真的不明白你们在说什么，或者如何使用它们。

Answer 1

Nic Meiring回答了一个有效的解决方案，但很难通过查找特定单词并在其上应用css来更改长段落中的颜色。在短文本的情况下可以，但对于长段落和变量文本，您需要应用一般解决方案。

CSS解决方案：（不确定所有浏览器）

Overriding The Default Text Selection Color With CSS

如果您被允许使用jQuery：

highlight: JavaScript text higlighting jQuery plugin

或者您可以在服务器端语言中使用字符串替换方法。例如PHP中的示例str_replace：

$text = str_replace("red", "<span class='red-class'>red<span>", "This is red");

Answer 2

您可以围绕要更改颜色的单词创建跨度。

我在http://jsfiddle.net/LwR8D/

为您创建了一个演示

Answer 3

使用innerHTML进行肮脏但有效的解决方案：

var words_and_colors = [
    {'word':'this', 'color':'red'},
    {'word':'to', 'color':'blue'}
];

function hilte_words_in_element (element, words) {
    for (var z=0; z < words.length; z++) {
        var re = new RegExp('('+words[z]['word']+'\\b)', 'gi')
        element.innerHTML =  element.innerHTML.replace(
            re,
            "<span style=\"color:"+words[z]['color']+"\">$1</span>"
        );
    }
}
hilte_words_in_element(document.getElementById('changeMe'), words_and_colors);

摆弄它：http://jsfiddle.net/8vDgH/

请注意，这被视为“不好” - 如果可以避免，则不应该处理innerHTML。不知道你正在使用它的情况，我不能与DOM进行更具体的交互;你知道你正在使用它，所以我建议你重构代码，使用更可接受的方法来改变节点内容。

另请注意，如果可以在服务器端完成此操作，那么效率会更高。您将使用类似的概念，但在输出内容之前这样做。我不知道这对你的用例是否可行，但如果是这样的话，毫无疑问它将是性能最佳的路线（你可以避免可怕的和邪恶的innerHTML）

Answer 4

是的，我知道问题没有javascript或jquery标记，但这可能是一个建议：）

将此附加到@Nic Meiring回答：

在页面的<header></header>部分添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

然后添加另一个<script></script>部分，用于在您的网页中调用以下javascript <header></header>部分：

(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/This/ig,'<span id="This">This</span>'));
})(jQuery)

Fiddle link

Use jQuery to Replace a Word

如何使特定的单词变成不同的颜色？

4 个答案: