logo标签列表

使用jQuery contains更改div中文本的颜色

javascriptjqueryhtmlcss
5
这里整个div内的文本都是红色的，但我只需要将“bar”这个词改成红色。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script type="text/javascript">
        $(document).ready(function(){
            $("#foo:contains('bar')").css('color','red');
        });
     </script>
     </head>
     <body>
    <div id="foo">
        this is a new bar 
    </div>
     </body>
    </html>
2
你需要用另一个元素来包围 bar。 - Gary
呀，就像一个跨度（显示为内联） - A. Wolff
是的，你们说得对，但在这种情况下这些值是动态获取的，我需要做什么。 - Vignesh
1
你需要将文本分割成几部分，并将“bar”放入它自己的元素中。使用innerHTML和字符串函数/正则表达式或使用DOM方法进行操作，取决于你。 - CBroe
6个回答
7
可以这样做： http://jsfiddle.net/PELkt/ 
var search = 'bar';
$(document).ready(function () {
    $("div:contains('"+search+"')").each(function () {
        var regex = new RegExp(search,'gi');
        $(this).html($(this).text().replace(regex, "<span class='red'>"+search+"</span>"));
    });
});
i 标志使这个解决方案不区分大小写。 - Nathan Arthur
6
$("div:contains('bar')").each(function () {
    $(this).html($(this).html().replace("bar", "<span class='red'>bar</span>"));
});

这肯定会奏效。

请点击此处查看演示。

2
您可以使用以下方式：

您可以采用如下方法：

       $(document).ready(function(){
               //  $("#foo:contains('bar')").css('color','red');
               var text = 'bar' ;
               var  context = $("#foo").html();
               $("#foo").html(context.replace(text,'<span style="color:red;">'+text+'</span>'));
        });
2
尝试一下这个... prototype 库：
<html> 
<head> 

    <style type="text/css">
        #content span {
            background-color: yellow;
        }
    </style>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
        Event.observe(window,'load',function(){
            var htm = $('content').innerHTML;
            $('content').innerHTML = htm.sub('bar','<font color=red>bar</font>');
        });
    </script>
</head>
<body>

    <div id="content">
        this is a new bar
    </div>

</body>

1
你可以这样做。 

$(document).ready(function(){
    var matchingTest = 'demo';
    $("#container:contains("+matchingTest+")").each(function () {
     $(this).html($(this).html().replace(matchingTest, "<span class='red'>"+matchingTest+"</span>"));
    });
});
.red{
  background:#eada93;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  Hello this is a demo contents.
</div>

0

带有代码片段的解决方案。

var text_change = 'bar';
$(document).ready(function () {
    $("div:contains('"+text_change+"')").each(function () {
        var regex = new RegExp(text_change,'gi');
        $(this).html($(this).text().replace(regex, "<span class='red'>"+text_change+"</span>"));
    });
});
.red {
    color:#008000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">this is a new bar and bar.</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接