Textteile in Textarea markieren

[Max Gruber]

Hiho allerseits,

Ich hab wirklich mehr als ne Stunde gegoogled, aber leider nie gefunden;
Darum wende ich mich nun mal ans die Experten^^...

Die Sache ist folgende:
Der Quellcode für meine HP ist in DBs gespeichert, damit ich den Quellcode direkt auf der Seite bearbeiten kann... .
Zum Bearbeiten des Quellcodes hab ich ja nun ne Textarea,
in die ich den Quellcode dynamisch(per JS) reinlade und dann bearbeite, etc.

Und nun zum Problem:
Ich möchte ne Suchfunktion per JS programmieren, die automatisch(event: onKeyUp)
den Inhalt der Textarea durchgeht und nach dem in ein Inputfeld eingegebenen Suchbegriff durchsucht;
Alle gefundenen Stellen sollen nun markiert werden...

Ich hoffe ihr könnt mir bei diesem Problem helfen;
Für andere/bessere Lösungsvorschläge bin ich natürlich auch offen^^

Gruß,
Max

[ritschmanhard]

Hi Max!
Nur mal so als Überlegung (ungetestet):
onkeyup -> eventhandler
eventhandler holt string aus searchinput Feld:
var searchStr=document.getElementById("IDSearchInput").firstChild.data
var meinContent = document.getElementById("IDTextArea").firstChild.data;
var meinSplit=meinContent.split(searchString);
var meinNeuerContent = meinSplit.join("<span class='markClass'>"+searchStr+"</span>");
document.getElementById("IDTextArea").innerHTML=meinNeuerContent;

Nun noch: markClass mit style{color:blue} versehen _und_ beim submit der Änderungen in deinem Textfeld alle spans wieder entfernen:

document.getElementById("IDTextArea").firstChild.data.replace(/<span class='markClass'>/g, "");
document.getElementById("IDTextArea").firstChild.data.replace(/</span >/g, "");

sollte funzen...

Grüsse,
Richard

[Max Gruber]

Erst mal Danke für deine Hilfe Richard...

Ansich klappt deine Methode, wie das Script die gesuchten Stellen
ermittelt perfekt... Das Problem ist nur, dass spans, die das
Suchergebnis hervorheben würden leider in Textareas nicht als code, sondern als Text interpretiert angezeigt werden...
Daher dachte ich auch, dass man die Suchergebnisse in der Textarea markiert('markieren' im Sinne von, "wie wenn man mit der Maus text zum kopieren markiert");
Hoffe, dass jemand von euch ne Idee hat, wie man nun das Ergebnis von
Richard optisch in der Textarea hervorheben kann...
(vllt kennt einer ja auch ne Möglischkeit, wie man den Text in der Textarea anderweitig einfärben kann)

Gruß,
Max

[ritschmanhard]

Hi Max!

Ich hab mal gegoogelt und das gefunden:
http://www.webreference.com/programming/javascript/ncz/

verlinkt war das in:
http://forum.de.selfhtml.org/archiv/2006/1/t121934/

Vielleicht ist das ja die Lösung?

Grüsse,
Richard

[Max]

Nach sowas hab ich gesucht... danke^^

[ritschmanhard]

Hi Max!

Was nach dem Tutorial noch fehlt, ist: wie kommst du an die Stringpositionen deiner suchmatches;

Ich denke hier Richtung search.
(Searchstring länge ermitteln mit length ist trivial...)

Dabei generierst du dynamisch den regulären Ausdruck:

myRegEx = new RegExp(regexstring), wobei du den regexstring aus dem search input bekommst.

und nun:
var textIter=textAreaString;
var fundPsition=0;
while ((pos=textIter.search(myRegEx))!=-1)
{
  var fundPosition=fundPosition+pos;
  //markiere hier ab fundposition ....
  textIter = textIter.substring(pos+1);
}

Technisch besser wäre eine Lösung, die den textAreaString von Hinten durchsucht, aber das obige sollte erst mal tun..

Grüsse,
Richard