【问题标题】：How to color portion of text using css or jquery如何使用 css 或 jquery 为文本部分着色
【发布时间】：2014-07-08 06:51:43
【问题描述】：

我有一段文本，其中有一个特殊字符（如 %word%）内的单词很少。我只想将段落的这些单词涂成红色。我可以在纯CSS中做到这一点吗？如果不是什么应该是通过 jquery 着色的正则表达式。示例：

<Html>
 <head>
 <style>
 </style>
 </head>
 <body>
  <div id="myelement">
     Hi how do I color %this%? 
  </div>
 </body>
</Html>

【问题讨论】：

简单的方法是使用span 标签将其包围并对其应用样式。例如：Hi how do I color <span style="color:red">this</span>?
“我该怎么做？”是题外话。既然你可能想尝试，我会继续提供一个开胃菜。除了我知道的一个例外，您不能只是在 HTML 中随机格式化字符串中的字母 - 它们需要包装在另一个元素中（例如 span）。尝试一下，如果遇到困难，请发布一个具体问题。
这些文本是动态的。
你检查过这个stackoverflow.com/questions/3063242/… 吗？

标签： javascript jquery html css

【解决方案1】：

我在javascript中使用了正则表达式（regex），如下：

function chnColor(){
    var str=document.getElementById("myelement").innerHTML;
    str=str.replace(/(%)(.*)(%)/g,"<font color='red'>$2</font>");
    //Here $2 Means Anything in between % and % This is what you need to color 
    document.getElementById("myelement").innerHTML=str;
}

`DEMO`

希望对您有所帮助！干杯:)！

【讨论】：

【解决方案2】：

<style>
.textColor{ color:red; }
</style>
<div id="myelement">
     Hi how do I color <span class="textColor"> %this%?</span> 

</div>

在php中

Hi how do I color <span class="textColor"> <?php echo $text; ?></span>

您可以在 css 中将类用于特定目的

【讨论】：

文本不是特定的，它是动态来自数据库的。
可以使用变量代替“this”