使用jquery contains更改div中文本的顏色

Question

div里面的整個文字都是紅色的。 但我只需要改變“條形”字的顏色

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

Answer 1

可以這樣做：

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

Answer 2

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

這肯定會奏效

請在這里看演示

Answer 3

你可以這樣使用：

       $(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>'));
        });

Answer 4

試試這個... 原型庫：

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

Answer 5

你可以這樣做。

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

Answer 6

解決方案與代碼片段..

 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>

使用jquery contains更改div中文本的顏色

問題描述

6 個解決方案

解決方案1
6 已采納 2013-06-21 10:35:04

解決方案2
5 2013-06-21 10:32:24

解決方案3
2 2013-06-21 10:36:57

解決方案4
2 2013-06-21 10:41:59

解決方案5
0 2017-01-07 05:12:50

解決方案6
0 2017-01-07 05:19:26

使用jquery contains更改div中文本的顏色

問題描述

6 個解決方案

解決方案1 6 已采納 2013-06-21 10:35:04

解決方案2 5 2013-06-21 10:32:24

解決方案3 2 2013-06-21 10:36:57

解決方案4 2 2013-06-21 10:41:59

解決方案5 0 2017-01-07 05:12:50

解決方案6 0 2017-01-07 05:19:26

解決方案1
6 已采納 2013-06-21 10:35:04

解決方案2
5 2013-06-21 10:32:24

解決方案3
2 2013-06-21 10:36:57

解決方案4
2 2013-06-21 10:41:59

解決方案5
0 2017-01-07 05:12:50

解決方案6
0 2017-01-07 05:19:26