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>

[Matthias Apsel]

Om nah hoo pez nyeetz, Besser keine Haare am Kopf als die Laus im Hirn ;P!

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

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

br? div? wozu?
Warum verwendest du ein *in*put-Element, das als type=text nur plain-text enthalten kann, für eine *Aus*gabe. Versuchs doch mal mit einem *out*put-Element oder einem semantisch passenden p.

Matthias

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

Danke für die hilfreichen Antworten!!!
Insbesondere mal wieder an molily der mir wieder aus meinem Schlamassel geholfen hat!!

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

...waren die Überreste eines vorherigen Versuches...sorry dass ich diesen Teil mitkopiert habe...das war nicht beabsichtigt ;)...

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

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

Hallo an alle!
Ich würde gerne in meiner Funktion den Ausgabewert markieren...
Dafür habe ich eben eine Ausgabefunktion erstellt(unten angegeben). Nun sollte jedoch
der Ausgabewert folgendermaßen markiert werden:

mit
.replace(new RegExp('(' + Wortteil + ')', 'gi'), '<span  style="color: #80FF00;">$1</span>')
sollte nur der Ausgabewert markiert werden
zB.:
Eingabe "a"
Ausgabe "Anton" mit markierten "A"

um den gewünscht Erfolg zu erlangen hatte ich versucht auf verschiedene Arten die Funktion mit dem .relace() zu erweitern...

siehe hier:
var myArray = (string.match(Ganzes_Wort)).replace(new RegExp('(' + Wortteil + ')', 'gi'), '<span  style="color: #80FF00;">$1</span>');

diese "Variante"(und auch alle anderen die ich versucht habe...) ist jedoch erfolglos...
Vielen dank für eure Hilfe mal wieder im Voraus...;)

Lg Besser keine Haare am Kopf als die Laus im Hirn ;P
und Danke!

Hier ist der Code

<meta charset="utf-8">

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

<script type="text/javascript">

function Suchfunktion () {
var Wortteil = document.getElementById('Eingabe_HTML').value;
var Ganzes_Wort = new RegExp("[^();,]*?" + Wortteil + "[^();,]*", "gi");
var string = ("(Anton), (Aal)");
var myArray = (string.match(Ganzes_Wort));
document.getElementById('Ausgabe1_HTML').innerHTML = myArray[0];

return false;
}
</script>

[molily]

Hallo!

Innerhalb eines Formular-Eingabefeld wird HTML nicht umgesetzt, sondern erscheint als Quellcode.

Verwende als Ausgabe kein input-Element, sondern ein ganz normales HTML-Element wie p, div oder span – je nachdem, welches passt. (Es gibt auch ein extra für den Fall gedachtes output-Element in HTML5.)

Ein solches Element kannst du ebenfalls über eine ID mit getElementById ansprechen. Anstatt der value-Eigenschaft verwendest du die http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=innerHTML-Eigenschaft zum befüllen.

<p id="ausgabe"></p>

document.getElementById('ausgabe').innerHTML = derNeueString;

var jetzt = vormals.replace(new RegExp('(' + vormals1 + ')', 'gi'), '<span  style="color: #80FF00;">$1</span>');

Noch ein kleiner Tipp: Die Klammerung im regulären Ausdruck ist nicht notwendig, du kannst einfach $0 verwenden, um den gesamten gefundenen Text auszuwählen (falls du das willst).

var jetzt = vormals.replace(new RegExp(vormals1, 'gi'), '<span style="color: #80FF00;">$0</span>');

Mathias