Question

我想在運行時將某些單詞更改爲輸入框中的用戶類型。反正有這樣做，因爲當我使用替換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>