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

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>