Markieren innerhalb von input mit ??span??

[Besser keine Haare am Kopf als die Laus im Hirn ;P]

Hallo! Ich würde gerne in "Eingabe_HTML" einen Text eingeben der dann in meinen string markiert werden sollte und in "Ausgabe0_HTML" ausgegeben werden sollte...bei der Ausgabe taucht jedoch dann auch schon mein Problem auf...statt den Text zu färben erscheint meine Eingabe(dies zwar wie gewollt) um die sich dann das <span></span> Element wickelt(anstatt eben jenen wie schon erwähnt einzufärben)...
Bsp.:
wird "I"
Eingegeben dann erscheint als
Ausgabe <span  style="color: #80FF00;">I</span>ch esse gerne Nudeln
statt "Ich esse gerne Nudeln" mit eingefärbten I
Vielen Dank für eure Hilfe schon mal Vorab!
Lg euer Besser keine Haare am Kopf als die Laus im Hirn ;P

Hier mein Code:

<input id="Eingabe_HTML" onKeyUp="Suchfunktion(this.value)"/>

<br>
<div >
<input  id="Ausgabe0_HTML" size="120"><br>
</div>

<script type="text/javascript">
function Suchfunktion () {
var vormals1 = document.getElementById('Eingabe_HTML').value;
var vormals = "Ich esse gerne Nudeln";
var jetzt = vormals.replace(new RegExp('(' + vormals1 + ')', 'gi'), '<span  style="color: #80FF00;">$1</span>');
var Ausgabe0_JS = document.getElementById('Ausgabe0_HTML');
Ausgabe0_JS.value = jetzt
   return false;
}
</script>