根据用户类型更改输入框文本的颜色

Question

当用户在运行时在输入框中输入时，我想要更改某些单词。有没有什么办法这样做，因为当我使用replace jQuery函数时，它会替换值，但不允许我更改它的css。谢谢

以下是我到目前为止所取得的成果

这是Javascript：

$("#submit-button").click(function(){
    var oldString = 'john',
    newString = '<span id="newChrome">chrome</span>'
    $("#text-editor").val($("#text-editor").val().replace(RegExp(oldString,"gi"),newString));
});

这是HTML

<input id="text-editor" maxlength="200" width:200px; />
<button id="submit-button">Submit</button>

Answer 1

使用 div元素，您可以实现在大多数现代浏览器中尝试实现的功能。

​

$("#submit-button").click(function() {
  var oldString = 'john',
    newString = '<span class="newChrome">chrome</span>',
    regex = new RegExp(oldString, "gi"),
    value = $("#text-editor").html(),
    str = value.replace(regex, newString);
  $("#text-editor").html(str);
});
$("#text-editor").on('input',function(){
  $a = $(this).find('span')
  $a.filter(function(){
    return $(this).html() != 'john';
  }).removeClass('newChrome');
  $a.filter(function(){
    return $(this).html() == 'chrome';
  }).addClass('newChrome');
});

.newChrome{
  color: red;
}
#text-editor{
  outline: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div contenteditable="true" id="text-editor" maxlength="200" style="width:200px;"></div>
<button id="submit-button">Submit</button>

​