5

ここでは、div get 内のテキスト全体が赤色になります。しかし、「バー」の単語の色だけを変更する必要があります 

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

6 に答える 6

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>'));
        });
于 2013-06-21T10:36:57.077 に答える
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>

于 2017-01-07T05:12:50.940 に答える
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>

于 2017-01-07T05:19:26.440 に答える