如何将颜色更改为 div 内的 html 单词答案

【问题标题】：How to change color to html word inside a div如何将颜色更改为 div 内的 html 单词
【发布时间】：2017-09-04 14:50:47
【问题描述】：

我需要更改 div 中单词的颜色。它充满了动态，有一个 javascript 函数可以在 DB 上读取并通过我的 div 的 ID 写入。我正在尝试为 INFO（仅 INFO）这个词着色，但没有成功：

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


/* THis is only an example*/

document.getElementById('textLog').innerHTML ="Load[DB]: INFO";

.green {
	color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="menuLog">
		<div class="log">
			<h3 class="textStyle">Log</h3>
			<div id="textLog" class="silverStyle" name="textLog" required></div><br>
		</div>
	</div>

【问题讨论】：

标签： javascript html colors

【解决方案1】：

您可以抓取包含所需文本的元素，就像您已经尝试做的那样，然后使用 html 替换单词 INFO：

$('div:contains("INFO")').html(function () {
    return $(this).html().replace(/INFO/g, "<span style='color: green'>INFO</span>"); 
});

根据 cmets 中的所有额外要求更新了 Fiddle：https://jsfiddle.net/bL24mw97/

【讨论】：

所以这个函数只有当一个 div 包含单词时才起作用....例如：
INFO
，而不是在我的情况下，这些单词是由 javscript '注入'的，所以不要以这种方式运行
你不能给一个简单的词上色，你必须把它放在我在例子里放的 span 里面，也许你需要阅读一些关于 HTML 和 CSS 作品的知识。
请看我的小提琴。通过将文本替换为绿色的 HTML 跨度来为单个单词着色
我不确定你的意思。您可以在注入文本后运行代码。我已经更新了小提琴。看一看。你按下按钮，文本被注入，INFO 被着色。
根据最新的解释，我编辑了我对替换的使用以使用正则表达式，以便它适用于文本的所有实例。

【解决方案2】：

试试这个。

function changeColor() {
  $( "span:contains('Info')" ).css( "color", "green" );
}

document.getElementById('textLog').innerHTML = "<span>Info<span>";
document.getElementById('textLog1').innerHTML = "<span>Info<span>";
document.getElementById('textLog2').innerHTML = "<span>Info<span>";

//This part emulates the data loading
//setTimeout(function(){ 
//  console.log('Data populated....');
//  //when finished you must call the function
//  changeColor();
//; }, 500);

changeColor();

.green {
	color: green;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="textLog" class="silverStyle" name="textLog" required></div>
<div>TEST</div>
<div id="textLog1" class="silverStyle" name="textLog" required></div>
<div id="textLog2" class="silverStyle" name="textLog" required></div>

</body>
</html>

你需要调用changeColor()方法来改变颜色，在填充信息的函数完成后进行。

【讨论】：

这个颜色只有第一项...不是全部
这个颜色全行，我要求给（读标题）这个词上色，只有这个词
全行是什么意思？你能说得更清楚些吗？
我的意思是，这个代码的 sn-p，所有行的颜色为绿色：{"eventID":1546,"time":"2017-09-04 14:25:21","level ":"INFO","message":"[loadDB] 。相反，我需要为 SINGLE 单词 INFO 着色。感谢您的帮助，但根据我的超时解决方案很重，会降低性能。跨度>
超时是一个触发函数的例子，不知道你什么时候填表的，你的例子中没有放这段代码。关于颜色，你不能给一个简单的词上色，你必须把它放在我在例子中放的 span 里面。

【解决方案3】：

我阅读了您的所有帮助，但有人不满意我的问题，有人去了接近解决它，但问题总是一样的，你的例子只涂了一个词，所以我改变了正则表达式：

$('#textLog').html('INFO start <br> INFO loadDB <br> WARN connection <br> ERROR DB not exist');
changeColor();


function changeColor() {
	$('div:contains("INFO")').html(function () {
	    return $(this).html().replace(/INFO/g, "<span       style='color:green'>INFO</span>"); 
	  });
    	$('div:contains("WARN")').html(function () {
	    return $(this).html().replace(/WARN/g, "<span       style='color:orange'>WARN</span>"); 
	  });
    	$('div:contains("ERROR")').html(function () {
	    return $(this).html().replace(/ERROR/g, "<b><span       style='color:red'>ERROR</span></b>"); 
	  });
    
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textLog" class="silverStyle" name="textLog" required></div><br>

【讨论】：