动态更改特定单词的颜色[重复]答案

【问题标题】：Change the color for specific words dynamically [duplicate]动态更改特定单词的颜色[重复]
【发布时间】：2016-06-20 17:14:20
【问题描述】：

我有一个文本区域，用户将在其中输入他的输入，并且我想更改我希望在输入字符串中找到的特定单词的颜色，例如我希望用户输入以下内容：

“我的名字是 Maryam，我的年龄是 24”

所以我想将“我的名字”和“我的年龄”的颜色更改为蓝色，并且我希望在用户输入“我的名字”或“我的年龄”后进行此更改。并在文本区域内显示彩色文本..

有没有办法使用 css、html 或 javascript 来做到这一点？

【问题讨论】：

不，它不一样，我希望更改发生在 textarea 内部而不是其他

标签： javascript html css textarea

【解决方案1】：

文本区域是不可能的。但是您可以通过隐藏文本区域来伪造结果并将颜色替换的文本显示到另一个元素中。

HTML

<textarea onkeyup="textChange()"></textarea>
<div id="colorText"></div>

Javascript：

var textChange=function(){
    var text=event.target.value;

    if(text.indexOf("My name")>-1){
        text=text.replace("My name", "<span class='blue'>My name</span>");
    }

    if(text.indexOf("my age")>-1){
        text=text.replace("my age", "<span class='blue'>my age</span>");
    }

    document.getElementById("colorText").innerHTML=text;
}

css

.blue{
    color:blue;
}

【讨论】：

【解决方案2】：

我不确定您是否可以更改输入字段本身的文本颜色。您可以做的是预览，在显示预览时，您可以添加标签来更改您正在查找的单词的颜色。

我建议通过使用 Regex 语句在每次输入新字符时通读文本来实现这一点（您可以使用 jQuery“更改”事件来执行此操作）。无论您在哪里找到这些词，都可以在其周围放置一个 html 标签以供预览。通过适当的 CSS 样式，这些标签可以改变其中单词的颜色。

【讨论】：