javascript - 随着用户输入更改输入框文本的颜色

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

使用 contenteditable 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>