动态更改特定单词的颜色

Question

我有一个文本框，用户会在其中输入文字，我想要更改特定单词的颜色，例如我期望用户输入以下内容：

"My name is Maryam and My age is 24"

因此，我想将"My name"和"My age"的颜色更改为蓝色，并且我希望这种更改发生在用户键入"My name"或"My age"时。我还想在文本框内显示有颜色的文本。

是否可以使用CSS、HTML或JavaScript来实现这一点？

- Maryam

---

不，这不一样，我想要更改发生在文本区域内部，而不是其他<div>中。 - Maryam

Answer 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;
}

- Marteiro

Answer 2

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

我建议使用正则表达式语句来实现这一点，每次键入新字符时读取文本（您可以使用jQuery“Change”事件来完成此操作）。无论您在哪里找到这些单词，都要在预览中放置类似于 的html标记。通过适当的CSS样式，这些标记可以更改其中的单词颜色。

- master565