发表新帖
发表新帖

Change the color of a text in div using jquery contains

后端 未结
关注
6 724
别那么骄傲
别那么骄傲 2021-01-13 07:47

Here the whole text inside the div get\'s red color. but I need only the \"bar\" word color to be changed
相关标签:
6条回答
  • 悲哀的现实
    2021-01-13 08:09

    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>"));
    });
});
    0 讨论(0)
  • 萌比男神i
    2021-01-13 08:10

    Solution with code snippet..

    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>

    0 讨论(0)
  • 孤城傲影
    2021-01-13 08:11

    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>'));
        });
    0 讨论(0)
  • 别那么骄傲
    2021-01-13 08:14

    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>

    0 讨论(0)
  • 温柔的废话
    2021-01-13 08:22 
    $("div:contains('bar')").each(function () {
    $(this).html($(this).html().replace("bar", "<span class='red'>bar</span>"));
});

    this will work surely

    Please see Demo Here

    0 讨论(0)
  • 有刺的猬
    2021-01-13 08:26

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题