Textauswahl und Zeilenmarkierung in HTML mit JavaScript (IE11-kompatibel), nicht ganz einfach bestimmte Text in einer < textarea > in HTML zu markieren!
Dieses einfache HTML-Dokument demonstriert die Auswahl und Markierung von Text in einer Textarea mithilfe von JavaScript. Der Code stellt sicher, dass die Markierungstechnik auch mit dem Internet Explorer 11 kompatibel ist. Zwei Textareas werden verwendet, wobei die erste Textauswahl durch setSelectionRange zeigt und die zweite Zeilenmarkierung in einer bestimmten Zeile mithilfe von createTextRange für IE11 realisiert wird. Der Code enthält detaillierte Kommentare für eine bessere Verständlichkeit.
Inhalt:
1.) ... Das Beispiel Bestimmten Text der Textarea zu markieren oder eine Zeile!
2.) ... Worauf ist zu achten Text der Textarea zu markieren oder eine bestimmte Zeile!
3.) ... Noch ein Beispiel um einen Text in zu marrkieren!
1.) Das Beispiel Bestimmten Text der Textarea zu markieren oder eine Zeile!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text markieren</title>
</head>
<body>
<!-- Textarea 1 -->
<textarea id="myTextarea" rows="10" cols="150">
// Hier wird der bestimmte Text in der Textarea ausgewählt (markiert)
var textarea = document.getElementById("myTextarea");
var start = 5; // Startposition des zu markierenden Textes
var end = 15; // Endposition des zu markierenden Textes
textarea.setSelectionRange(start, end);
</textarea>
<script>
// Hier wird der bestimmte Text in der Textarea ausgewählt (markiert)
var textarea = document.getElementById("myTextarea");
var start = 5; // Startposition des zu markierenden Textes
var end = 15; // Endposition des zu markierenden Textes
textarea.setSelectionRange(start, end);
// Hier wird die zweite Zeile in der Textarea markiert
</script>
<!-- Textarea 2 -->
<textarea id="myTextarea2" rows="10" cols="150">
// Hier wird der bestimmte Text in der Textarea ausgewählt (markiert)
var textarea = document.getElementById("myTextarea");
// Startposition des zu markierenden Textes
// Endposition des zu markierenden Textes
var lines = textarea.value.split('\n');
die zweite Zeile in der Textarea markiert
textarea.setSelectionRange(start, end);
</textarea>
<script>
// Hier wird die zweite Zeile in der Textarea markiert
var textarea = document.getElementById("myTextarea2");
// Zeilen im Textarea-Inhalt aufteilen
var lines = textarea.value.split('\n');
var s = 0; // Startposition
for (var i = 0; i < lines.length; i++) {
// Zeile 2 markieren
if (i == 1) {
break;
}
// Startposition aktualisieren
s += lines[i].length;
s += 1; // Für den Zeilenumbruch
}
var e = lines[i].length; // Endposition
e += 1; // Für den Zeilenumbruch
e += s; // Endposition aktualisieren
// Anzeigen der Start- und Endposition (nur zu Debugging-Zwecken)
alert("Startposition: " + s + ", Endposition: " + e);
// Textbereich auswählen (markieren)
textarea.setSelectionRange(s, e);
</script>
</body>
</html>
2.) Worauf ist zu achten Text der Textarea zu markieren oder eine bestimmte Zeile!
Wenn du Text in einer Textarea oder eine bestimmte Zeile markieren möchtest, gibt es einige wichtige Überlegungen:
Text in einer Textarea markieren:
Verfügbarkeit von Textbereichsmethoden:
Die Methode setSelectionRange ist in modernen Browsern weit verbreitet und bietet eine einfache Möglichkeit, Text in einer Textarea zu markieren. Stelle sicher, dass sie in den Browsern funktioniert, die du unterstützen möchtest.
Start- und Endposition:
Achte darauf, dass du die richtigen Start- und Endpositionen für die Auswahl angibst. Diese sollten im Bereich der Zeichen in der Textarea liegen.
Bestimmte Zeile markieren:
Kompatibilität mit älteren Browsern:
Wenn du eine bestimmte Zeile markieren möchtest und Internet Explorer 11 unterstützen musst, solltest du die createTextRange-Methode verwenden, da setSelectionRange in IE11 nicht verfügbar ist.
Berücksichtigung von Zeilenumbrüchen:
Achte darauf, wie Zeilenumbrüche in deiner Textarea dargestellt werden. In manchen Fällen könnte ein Zeilenumbruch durch \r\n erfolgen, anstatt nur durch \n.
Berechnung der Start- und Endpositionen:
Wenn du eine bestimmte Zeile markieren möchtest, musst du die Start- und Endpositionen basierend auf der Länge der vorherigen Zeilen berechnen. Stelle sicher, dass du diese Berechnungen genau durchführst.
Mögliche Änderungen im Textinhalt:
Wenn der Textinhalt dynamisch geändert wird, musst du sicherstellen, dass deine Markierungslogik darauf vorbereitet ist. Du könntest beispielsweise die Markierung aktualisieren, wenn sich der Text ändert.
In beiden Fällen sind ausführliche Kommentare im Code hilfreich, um den Code besser zu verstehen und zukünftige Wartungen zu erleichtern.
3.) Noch ein Beispiel um einen Text in zu marrkieren!
Hier ist dein HTML-Code mit Kommentaren versehen:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text markieren</title>
</head>
<body>
<!-- Textarea für die Benutzereingabe -->
<textarea id="myTextarea3" rows="10" cols="150">
// Hier wird der bestimmte Text in der Textarea ausgewählt (markiert)
var textarea = document.getElementById("myTextarea");
// Startposition des zu markierenden Textes
// Endposition des zu markierenden Textes
wwwwwwwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
textarea.setSelectionRange(start, end);
</textarea>
<!-- JavaScript-Abschnitt -->
<script>
// Funktion zum Hervorheben eines bestimmten Texts in einer Textarea
function MarrkiereInTextarea(suche, TextareaID) {
// Das Textarea-Element anhand seiner ID abrufen
var textarea = document.getElementById(TextareaID);
// Den gesamten Textinhalt der Textarea abrufen
var fullText = textarea.value;
// Die Startposition des Suchtexts finden
var start = fullText.indexOf(suche);
// Die Endposition basierend auf der Länge des Suchtexts berechnen
var end = start + suche.length;
// Start- und Endpositionen zu Debugging-Zwecken anzeigen
alert("Startposition: " + start + ", Endposition: " + end);
// Den angegebenen Bereich in der Textarea auswählen (Text hervorheben)
textarea.setSelectionRange(start, end);
}
// Die Funktion aufrufen, um den Text "Endposition des"
// in der Textarea mit der ID "myTextarea3" hervorzuheben
MarrkiereInTextarea("Endposition des", "myTextarea3");
</script>
</body>
</html>
Ich habe eine Funktion `MarrkiereInTextarea` hinzugefügt, die den Suchtext und die ID der Textarea als Parameter annimmt. Diese Funktion findet die Startposition des Suchtexts, berechnet die Endposition, zeigt sie zu Debugging-Zwecken an und wählt dann den angegebenen Bereich in der Textarea aus. Die Funktion wird dann mit den Argumenten "Endposition des" und "myTextarea3" aufgerufen, um den spezifischen Text in der angegebenen Textarea zu markieren.
