Farbe eines spezifischen Textes ändern

[rofl1234567]

Hallo Mitstreiter,

ich bin auf ein für mich bisher unumgängliches Problem gestoßen und bin auf Hilfe eurerseits angewießen.

Ich habe ein HTML Form wie beispielsweise jenes welches:
<input type="file" class="form-set" id="whatever" aria-describedby="Whatever">

Ich habe zwei Dinge die ich erreichen möchte.
1. Wenn ein Nutzer in dass Form den Text "test.de" eingibt nur dann die Schriftfarbe von test.de auf Gelb gewechselt wird. Der Restliche Text soll die vorherige Farbe behalten
2. Wenn ein Nutzer "https://test.de" eingibt soll der Text zwischen https:// und .de auf die Farbe gelb wechseln

Gibt es für meine beiden Fälle eine Lösung? :)
Bitte beachtet dass der Nutzer auch 2 mal test.de eingeben kann und auch beide male der Text Gelb sein soll.

Ich hoffe ich habe meine Frage gut gestellt wenn nicht bin ich für Fragen dankbar. :)
Grüße
Manu

 

[rofl1234567]

Eine richtig schöne und elegante Lösung fällt mir da nicht ein, nur:
Ein div absolut über dem input positionieren, das div mit pointer-events: none;für Eingaben durchlässig machen, den Wert des input in dieses div mit Javascript spiegeln und entspr. formatieren.

<div id="whatever1">
    <input class="form-control" id="whatever2" aria-describedby="whatever" placeholder="Enter whatever">
</div>

whatever1 = document.getElementById('whatever1').value

Und jetzt ?

Ich will ja den Text "tes.de" und nicht .value also den ganzen Text
Wüsste jemand wie ich das mache? :)

 

[basti1012]

Du mußt den Text ja erstmal auslesen ( value ) und dann mir regex, indexOf oder replace oder auch noch anders dann da raus lesen.

 

[rofl1234567]

Okidoki ja dass leuchtet ein.
Danke für die Hilfe
Ich poste wie es funktioniert hat dann für Dokuzwecke ein

 

[basti1012]

Der vorschlag von @Sempervivum funktioniert so weit ganz gut.Du solltest es auf jedenfall in der richtung machen. Habe das auch mal gerade getestet .
Mit keydown event das Feld auslesen. Mit repleace vergleichen bis test.de kommt ,das austauschen mit span der gelb ist .Dann wieder einfügen.

Gibt bestimmt noch andere möglichkeiten doch wenn in den Eingabefeld nur bestimmte Wörter Gelb sein dürfen und das andere nicht ,bleibt dir wohl nur die contenteditable Lösung über. Den ganzen Input Text Gelb färben ist ken Problem ,doch mit ein paar Wörtern sieht es anders aus