2013-06-21 19 views
5

Tutaj cały tekst wewnątrz div get czerwony kolor. ale trzeba ja tylko "bar" słowo kolor zostać zmienioneZmiana koloru tekstu w div przy użyciu jquery zawiera

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

Musisz otoczyć 'bar' z innym elementem. – Gary

+0

ya, jak przęsło (wyświetlanie w wierszu) –

+0

Tak, masz rację, ale te wartości są osiągane dynamicznie w takich przypadkach, co muszę zrobić – Vignesh

Odpowiedz

6

można zrobić tak:

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>")); 
    }); 
}); 
+0

Flaga 'i' sprawia, że ​​ta wielkość rozróżniania jest niewrażliwa. –

5
$("div:contains('bar')").each(function() { 
    $(this).html($(this).html().replace("bar", "<span class='red'>bar</span>")); 
}); 

to zadziała na pewno

proszę zobaczyć Demo Tutaj

2

można wykorzystywać w ten sposób:

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

Spróbuj tego ... prototype biblioteka:

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

+0

OP już korzysta z jQuery. – Gary

0

Można zrobić tak.

$(document).ready(function(){ 
 
    var matchingTest = 'demo'; 
 
    $("#container:contains("+matchingTest+")").each(function() { 
 
\t  $(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

Rozwiązanie z fragmentu kodu ..

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>

Powiązane problemy