Siechfred: [Javascript]Auswahl in einem Textfeld ermitteln und ersetzen

Beitrag lesen

Hallo Balthi.

Ich möchte in einer textarea, in der z.B. 20 Wörter stehen, von denen ich 2 Wörter markiert habe, und dann auf einen Button klicke, diesen markierten Text durch einen anderen ersetzen.

Gut.

function input_bold()
{
   var txtarea=document.text.text;
   if(txtarea.getSelection) {
      bold="[ B ]"+txtarea.getSelection+"[ /B ]";
      txtarea.getSelection = bold;
   } else {
      if(txtarea.selection) {
         bold="[ B ]"+txtarea.selection.createRange()+"[ /B ]";
         txtarea.selection.createRange()=bold;
      }
   }
}

Also mal der Reihe nach. Du willst etwas ersetzen, das in einer Textarea eingegeben wurde. Die Umsetzung hängt sehr stark vom verwendeten Browser ab. Im Internet Explorer steht dir dafür das Objekt selection und TextRange zur Verfügung:

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_textrange.asp
http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_selection.asp

Damit hättest du Teil 1 der Operation. In neueren Geckos steht dir die getSelection-Methode sowie die Eigenschaften selectStart und selectEnd zur Verfügung:

http://de.selfhtml.org/javascript/objekte/document.htm#get_selection
http://devedge.netscape.com/library/xref/2002/client-data/dom-html-element-TEXTAREA.html

Damit hättest du schon mal die zwei großen modernen Browserfamilien abgedeckt. Jetzt musst du nur noch nach Fähigkeiten verzweigen:

function Ersetzen(Anfang, Ende)
{
  var insText;
  // versuche, eine Referenz auf die Textarea zu erzeugen
  // im Beispiel ist dies die erste Textarea im Dokument
  try {
    input = document.getElementsByTagName("textarea")[0];
  }
  catch(e) {
    // bei Misserfolg Funktion beenden
    return;
  }
  // Kennt der Browser das TextRange-Objekt?
  if(input.createTextRange) {
    insText = Anfang + document.selection.createRange().text + Ende;
    document.selection.createRange().text = insText;
  }
  // Ist es vielleicht ein Gecko?
  else if(input.setSelection) {
    var start = input.selectionStart;
    var end = input.selectionEnd;
    insText = input.value.substring(start,end);
    input.value = input.value.substr(0, start) + bTag + insText + eTag + input.value.substr(end);
    // falls die Ersetzung gleich markiert sein soll:
    // input.setSelectionRange(start, start+insText.length);
  }
  // für alle anderen gilt Handarbeit
  // die Ersetzung wird hinten dran gehangen
  // was besseres fällt mir hier leider nicht ein :-(
  else {
    var txt = prompt("Bitte geben Sie den neuen Text ein:");
    insText = Anfang + txt + Ende;
    input.value += insText;
  }
  input.focus();
}

Aufruf des Ganzen: "Ersetzen('Start-Tag', 'End-Tag');". So sollte es vom Prinzip her gehen, falls sich keine Fehler eingeschlichen haben.

Freundschaft!
Siechfred

--
Nichts ist schwerer einzureißen als die Mauer in den Köpfen.