Menu
Here the whole text inside the div get's red color. but I need only the "bar" word color to be changed
<!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>
278
Could be done like that:
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>"));
});
});
$("div:contains('bar')").each(function () {
$(this).html($(this).html().replace("bar", "<span class='red'>bar</span>"));
});
this will work surely
Please see Demo Here
26
You can use this way :
$(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>'));
});
Try this... prototype library:
<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>
You can do like this.
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
