使用 jquery contains 更改 div 中文本的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17232820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 18:40:59 来源:igfitidea点击:
Change the color of a text in div using jquery contains
提问by Vignesh
Here the whole text inside the div get's red color. but I need only the "bar" word color to be changed
这里 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>
回答by A. Wolff
Could be done like that:
可以这样做：
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>"));
});
});
回答by User 1531343
回答by A1Gard
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>'));
});
回答by Ganesh Rengarajan
Try this... prototypelibrary:
试试这个...原型库：
<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>
回答by Anil Singh
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>回答by Mr. HK
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>